How to change the background color of the Polymer toolbar (1.0)?

Question

Yesterday I decided to try Polymer 1.0, and I am already having difficulty trying to style the toolbar.

The documentation states that the background color can be changed using: --paper-panel-background

But how can I use it in CSS?

I tried the following:

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

Also this:

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

But no one worked. What is the right way to do this?

Thanks.

Answer 1

If you create it on the main page, you need to apply styles using <style is='custom-style'> . This is done to create custom CSS properties.

The application is relatively simple. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background - a property that changes the background color of the toolbar, and --paper-toolbar-color changes the foreground color. --paper-toolbar is a mix applied to a toolbar.

Using these properties is the same as applying styles to 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> 

Answer 2

I could not find a solution to this problem until recently. I have two toolbars, and I did not want to change CSS for all toolbars only on the title toolbar.

To change the CSS for each toolbar, add the following in your external css file:

 paper-toolbar.paper-toolbar-0 { background: orange; color: red; } 

However, this does not solve the problem. To change an individual class-based toolbar, for example:

 <paper-toolbar class="header"> ... </paper-toolbar> 

The above example uses a class called "header", so in my CSS I added:

 paper-toolbar.header { background: orange; color: red; } 

... and it worked! Hooray! This means that with this you should be able to redefine any CSS of any of the other elements doing the same. This is completely untested, but I think it should work as follows:

 <elementName>.<classname> { ... } 

Hope this helps!