changing color of ?

Question

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?

score 4 · Answer 1 · answered Nov 06 '15 at 06:36

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

adam0101 · Answer 2 · 2018-08-23T19:35:39.053

4

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'}"

edited Aug 23 '18 at 19:35

answered Feb 14 '17 at 18:13

adam0101

29,096
21
96
174

`backgroundColor` is not working, to make it work use ` – Jouke Aug 23 '18 at 19:30
@Jouke, I could have sworn that I used it as I posted, but I see the documentation shows it as you have it. I'll update the answer. – adam0101 Aug 23 '18 at 19:34

changing color of ?

2 Answers2