Search code examples
cssdart-polymerpaper-elements

dart paper-scaffold background-color=#526E9C for header. Where to change?

I have read the answers to the other [very] related questions, but I thought I would pose it again since polymer updates might have been made.

I can change all the colors in [dart] paper-scaffold (core-scaffold) - the menu and toolbar, but I cannot change the color of the header across the top. It is always background-color=#526E9C. The only way I can do it is change the core-toolbar style in the generated (using pub build) index.html. And this one line change sets the color across the whole header across the browser window (which is what I want). So I can get by.

When I do style:

core-toolbar{
background-color: #7A418D;
color: #FFF;
}

it only changes the color above the drawer, and not across the whole top. It's very mysterious why it just does that bit!

I have tried shadow-shim, core-scaffold::shadowdom.. etc. I have tried changing the /src/ core-scaffold.html - and more, where this pervasive value #526E9C appears.

In my website (sekpa.org) it shows this blue (#526E9C) half.

Is it just a bug? If it is, I'd be very happy in that knowledge!
Thanks
Steve

Solution

  • There are two core-header-panels inside a paper-scaffold.

    Each core-header-panel contains one core-toolbar.

    The left collapsible core-header-panel as well as its inner core-toolbar are sitting in the normal Light DOM, and that's why you can change its color by specifying the css like that.

    However, the right core-header-panel and core-toolbar are inside paper-scaffold's Shadow DOM. In order to change the color of this core-toolbar, you need to do something like -

    paper-scaffold::shadow core-toolbar {
  background: #7A418D;
  color: #fff;
}

    For more info, please refer to this link.