Cloud Development Kit

How to modify colors of buttons and text color in resultField?

There only seems to be a direct way to modify the pen color through the math-web-element but is there another work around to modify the colors for the buttons/result field? I tried modifying the color within the Polymer style itself but I think it gets overridden somewhere in the process.


Dear Robert, Yes, the color of the result field can be modified in the math-web component, (  


'.resultField {
            font-size: larger;
            overflow: hidden;
            text-align: center;
            min-height: 95px;
            max-height: 95px;
            padding-top: 5px;
            position: relative;
            color: #1580CD ;


Did you try to change this value?

Regarding buttons, there are 2 different approaches, use the property to hide them and create your own buttons or change colors values defined in the 'common element' web component:


 --paper-fab-background: #1A9FFF;
            --paper-fab-keyboard-focus-background: #1A9FFF;
            --paper-fab-disabled-background: #F5F6F7;
            --paper-fab-disabled-text: #dcdee0;
        .buttons {
            position: inherit;
            float: left;
            display: flex;
            display: -webkit-flex;
            z-index: 2;
            background-color: transparent;
            padding: 6px;
        paper-fab {
            z-index: 3;
            background: #1A9FFF;
            margin: 6px;


Please let us know if you face any issue.

Best regards

Thanks for the meaty reply! I was able to nail down these features accordingly. I should've mentioned that here so you didn't have to expend the effort. My issue was not properly refreshing my cache as it kept loading the old components. 

No problem!

Thanks for your feedback!

Login or Signup to post a comment