Color change <md-toolbar>?

Question

This is what my CodePen code looks like:

I want the background of " Sidenav Left " to be like " Menu Items ", which is represented by the class as

 .nav-theme { background-color: #34495E } 

I tried to redefine it as

 .nav-theme, .md-theme-indigo { background-color: #34495E } 

but it didn’t work, what do I need to do?

Answer 1

Clarify the choice of CSS to override. Since more specific selectors are more specific, their priority will be higher than the default background color, which has not been redefined before. This way you avoid using !important

 .md-sidenav-left .md-theme-indigo, .md-sidenav-left .nav-theme { background-color: #34495e; } 

CodePen Demo

Answer 2

You can use the md-colors directive to set it to a color from your color palette. Thus, this will automatically change if you select a different topic.

 <md-toolbar md-colors="::{backgroundColor: '{{theme}}-primary-700'}"