UX: How do you override the CSS or theme color of the toolbar?

I am trying a simple example, where I have a toolbar (paper-toolbar). For some reason, the background is defaulted to blue. I think there is some parent theme that is driving this. I would like to override the color of the toolbar. Is there a way I can do this? For example:

<paper-toolbar class=”medium”>

<paper-icon-button icon=”menu”></paper-icon-button>


This shows the <paper-toolbar> in its blue color. I tried using “–paper-toolbar-background: red;”… But it does not display it. After some digging from the JavaScript console, there is something like:

:root:not([style-scope]):not(.style-scope) paper-toolbar:not(.tri-disable-theme) {

background-color: #1D3649;

color: #FFF;


But it is not letting me change the color. I would appreciate if someone could tell me how I could override the CSS or theme…

[Admin: This post is related to the 02.12.16 post about how to edit the UX theme.]

Continue reading


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s