mdツールバーのヘッダーとアイコンのテキストの色を変更します

Question

テキストとアイコンの色を白に変更する必要があります。

角度材料ツールバーのページ（https://material.angularjs.org/latest/demo/toolbar）で与えられているのと同じである以下のCSSを試しましたが、機能しません。

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

は、その後、私はこのCSSを追加し、それが見出しの色を変更：ここで

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

は、私が試したcodepenです：http://codepen.io/nhere/pen/RadGQL

しかし、私はに全体のツールバーのテキストの色を変更する必要があります白。これを行う方法 ？

Answer 1

あなたのコードペインのHTMLを見てください。それは示しています

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

変更whiteからgreenyellow。 HTMLのインラインCSSを見てください。また、CSSで参照したクラスによってアイコンが取得されない場合もあります。アイコンに独自のIDを与え、塗りつぶしを変更します（Materialのデフォルトのスタイルシートで何かを上書きする必要がある場合は、!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オプションを削除すると、font-colorは黒色になります