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

Question

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.

Answer 1

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>