I'm having issues trying to set the full background color of the toolbar in Polymer 0.5 when using core-scaffold. What I've tried so far on Stackoverflow only sets the left menu side, but not the right content side. How does one set the background color for the full toolbar?
Below is the code sample from their own example.
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core-menu>
<core-item icon="settings" label="item1"></core-item>
<core-item icon="settings" label="item2"></core-item>
</core-menu>
</core-header-panel>
<div tool>Dashboard</div>
<div class="content">Content goes here...</div>
<paper-toast id="error-toast" text="" swipeDisabled="false"></paper-toast>
</core-scaffold>
Cross Browser Support
Thanks to @CtrAltDel for leading me in the right direction. That solution only worked in IE. The following works in IE and Chrome.
<style>
body core-toolbar { background-color:Black; color:#ffffff; }
core-scaffold::shadow core-toolbar { background-color:Black; color:#ffffff; }
</style>
It has been a while but I had this working in the past:
with whichever color you want to use as the background-color value.