2016-05-10 22 views
1

テキストとアイコンの色を白に変更する必要があります。mdツールバーのヘッダーとアイコンのテキストの色を変更します

角度材料ツールバーのページ(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

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

+0

テキストの色はすでに白に設定されているため、探しているものがわかりません。コードペンのどのツールバーについて話していますか? –

+0

純粋な白色ではありません。 'toolbardemoBasicUsage md-toolbar h2'これを使って見出しのテキストの色を白に変更します。しかし、まだアイコンは純粋な白色ではありません。色の変化は少しあります。 – Rookie

+0

純粋な白色の定義は何ですか?これは、ブラウザによってデフォルトの白い色です。別の白い色をしたい場合は、単に 'color:white;'を別のものに変更してください。たぶんこれを見て好みの色を選んでください:http://cloford.com/resources/colours/500col.htm –

答えて

0

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

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

変更whiteからgreenyellow。 HTMLのインラインCSSを見てください。また、CSSで参照したクラスによってアイコンが取得されない場合もあります。アイコンに独自のIDを与え、塗りつぶしを変更します(Materialのデフォルトのスタイルシートで何かを上書きする必要がある場合は、!importantを使用してください)。

0

ツールバーはテーマの原色を使用します。あなたのカラーテーマを定義することができます。

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); 
} 
0

あなたが軽いフォントの色(白ではない)のではなく、黒を使用したい場合は、あなたの主なパレットをカスタマイズするが、次の属性を追加します。

'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は黒色になります

関連する問題