Changing CSS variables via JS in Polymer

Question

In my Polymer project, I have a toolbar with a color I want to change using JavaScript. Since Polymer uses the CSS variable — paper-toolbar-background internally for styling

Answer 1

Set the variable value in the element's customStyle map then call the updateStyle method.

Here is an example of an element that changes its own visibility by modifying the value of a custom style that it defines. The variable can be external as well.