изменение цвета <md-toolbar>?

Question

Это как мой код выглядит на CodePen:

Я хочу, чтобы на фоне «Sidenav Left», чтобы быть, что из «Menu Items», который представлен классом, как

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

Я попытался переопределяя его как

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

но это не сработало, что мне нужно сделать?

Answer 1

Будьте более конкретными в выборе CSS для переопределения. Поскольку более определенные селектора более специфичны, их приоритет будет выше, чем цвет фона по умолчанию, который раньше не был переопределен. Таким образом, вы избегаете использование !important

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

CodePen Demo

Answer 2

Вы можете использовать md-colors директиву, чтобы установить его в цвет с вашей цветовой палитры. Таким образом, это автоматически изменится, если вы выберете другую тему.

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