How to change Polymer(1.0) paper-toolbar background colour?

http://stackoverflow.com/questions/30556196/how-to-change-polymer1-0-paper-toolbar-background-colour

Q:

Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.

The documentation says that the background colour can be changed by using:--paper-toolbar-background

But how can I use it on CSS?

I tried the following:

paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}

Also this:

paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}

But neither worked. What is the correct way to do it?

Thanks.

A:

If you are styling it on your main page, then you have to apply styles using

<style is='custom-style'>

. This is to make Custom CSS Properties work.

Applying is relatively easy.

paper-toolbar

provides 2 custom properties and one mixin.

--paper-toolbar-background

is a property that changes the background color of the toolbar while

--paper-toolbar-color

changes its foreground color.

--paper-toolbar

is a mixin applied to the toolbar.

To use these properties is just the same as applying styles in your elements. As an example

<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>