CODEWITHSUNDEEP
htmlcssangularjsangular-material
daydreamer
daydreamer

Reputation: 92149

changing color of <md-toolbar>?

This is how my code looks like on CodePen:

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

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

I tried overriding it as 

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

but that did not work, what do I need to do?

Upvotes: 6

Views: 16320

Answers (2)

adam0101
adam0101

Reputation: 31095

You can use the md-colors directive to set it to a color from your color palette. That way it'll change automatically if you pick a different theme.

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

Upvotes: 4

m4n0
m4n0

Reputation: 32355

Be more specific in your CSS selection to override. Since the below selectors are more specific, their priority will be higher than the default background color that was not getting overridden before. In this way you are avoiding the usage of !important

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

CodePen Demo

Upvotes: 4

Related Questions