Css 更改md工具栏标题和图标的文本颜色

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

我尝试了下面的css，它与angular material工具栏页面（）中给出的相同，但不起作用

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

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

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

这是我试过的密码笔：

---

但我需要将整个工具栏文本颜色更改为白色。如何做到这一点？

查看代码笔的HTML。它表明：

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

---

将

绿黄色

更改为

白色

。注意HTML中的内联CSS。还要注意，如果图标没有被CSS中引用的类捕获。为图标指定自己的ID并更改颜色（如果需要覆盖材质默认样式表中的任何内容，请使用

！important

。

查看代码笔的HTML。它表明：

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

---

将

绿黄色

更改为

白色

。注意HTML中的内联CSS。还要注意，如果图标没有被CSS中引用的类捕获。为图标指定自己的ID并更改颜色（如果需要覆盖材质默认样式表中的任何内容，请使用

！important

。

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

或用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);
}

---

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

或用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);
}

---

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

'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');

---

这将显示一个深（淡）绿色工具栏，带有较浅的字体颜色。如果删除对比默认颜色选项，则字体颜色将为黑色

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

'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');

---

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

我不确定您要查找什么，因为文本颜色已设置为白色。你说的是代码笔中的哪个工具栏？那不是纯白色

toolbardemoBasicUsage md toolbar h2

通过使用此选项，我将标题文本颜色更改为白色。但图标仍然不是纯白色的。颜色有点变化。纯白的定义是什么？这是浏览器默认的白色。如果您想要不同的白色，只需更改

颜色：白色指向其他内容。也许看看这个，然后选择一种你喜欢的颜色：你能试着从codepen中删除这个CSS
toolbar DemoBasicUsage md toolbar h2
，看看颜色的变化吗。我不确定你在找什么，因为文本颜色已经设置为白色。你说的是代码笔中的哪个工具栏？那不是纯白色
toolbardemoBasicUsage md toolbar h2
通过使用此选项，我将标题文本颜色更改为白色。但图标仍然不是纯白色的。颜色有点变化。纯白的定义是什么？这是浏览器默认的白色。如果您想要不同的白色，只需更改
颜色：白色指向其他内容。也许可以看看这个，然后选择一种你喜欢的颜色：你能试着从codepen中删除这个CSS
toolbar DemoBasicUsage md toolbar h2
，看看颜色的变化吗。