更改md-toolbar标题和图标的文本颜色

Question

我需要将文字和图标颜色更改为白色。

我尝试了以下css，它与角度材质工具栏页面中的相同（http://codepen.io/nhere/pen/RadGQL）不起作用。

.toolbardemoBasicUsage md-toolbar md-icon.md-default-theme {
  color: white; }

然后我添加了这个css，它改变了标题的颜色：

.toolbardemoBasicUsage md-toolbar h2 {
  color: white; }

这是我尝试的codepen：

但是我需要将整个工具栏文本颜色更改为白色。怎么做？

Answer 1

查看您的codepen的HTML。它显示：

<md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>

将greenyellow更改为white。注意HTML中的内联CSS。另请注意，如果图标未被CSS中引用的类捕获。为图标提供自己的ID并更改颜色（如果需要，可以使用!important覆盖材质默认样式表中的任何内容。）

Answer 2

工具栏使用主题的主要颜色。您可以定义颜色主题：

https://material.angularjs.org/latest/Theming/03_configuring_a_theme

或用css覆盖：

md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
    background-color: rgb(255, 0, 0);
    color: rgb(255,255,255);
}

Answer 3

如果您想使用较浅的字体颜色（不是白色）而不是黑色，请自定义主要调色板，但添加以下属性：

'contrastDefaultColor':'light'

以下是一个例子：

var customPrimary = {
  '50': '#ffffff',
  '100': '#87b065',
  '200': '#7aa755',
  '300': '#6e964c',
  '400': '#618544',
  '500': '#55743b',
  '600': '#496332',
  '700': '#3c522a',
  '800': '#304121',
  '900': '#233019',
  'A100': '#a1c286',
  'A200': '#afca97',
  'A400': '#bcd3a8',
  'A700': '#171f10',
  'contrastDefaultColor': 'light'
 };
 $mdThemingProvider
    .definePalette('customPrimary',
     customPrimary);

 $mdThemingProvider.theme('default')
   .primaryPalette('customPrimary');

这将显示一个深色（ish）绿色工具栏，字体颜色较浅。如果删除 contrastDefaultColor 选项，则字体颜色将为黑色