2016-01-27 44 views
3

基本上我不能爲我的生活弄清楚如何設置使用角材料和其他任何使用md-primary背景色的按鈕的文本顏色。如何更改角度材質md-primary按鈕的文字顏色?

我使用創建主題的代碼是

var customPrimary = { 
     '50': '#7de3cf', 
     '100': '#69dec8', 
     '200': '#54dac0', 
     '300': '#3fd5b8', 
     '400': '#2dceaf', 
     '500': '#28b99d', 
     '600': '#23a48b', 
     '700': '#1f8f79', 
     '800': '#1a7a68', 
     '900': '#166556', 
     'A100': '#92e8d7', 
     'A200': '#a7ecdf', 
     'A400': '#bcf1e7', 
     'A700': '#115044' 
    }; 
    $mdThemingProvider 
     .definePalette('customPrimary', 
     customPrimary); 
    $mdThemingProvider.theme('buttons') 
     .primaryPalette('customAccent'); 

但是不管我怎麼努力,我可以得到文本顏色設置爲#fff除非我用CSS和!important我想避免,因爲它意味着壓倒幾個選擇器。

+0

嘗試改變 '500' 顏色 – Toolkit

回答

6

docs

angular.module('myApp', ['ngMaterial']) 
.config(function($mdThemingProvider) { 
    $mdThemingProvider.definePalette('amazingPaletteName', { 
    '50': 'ffebee', 
    ... 
    'A700': 'd50000', 
    'contrastDefaultColor': 'light', // whether, by default, text (contrast) 
             // on this palette should be dark or light 
    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default 
    '200', '300', '400', 'A100'], 
    'contrastLightColors': undefined // could also specify this if default was 'dark' 
    }); 
    $mdThemingProvider.theme('default') 
    .primaryPalette('amazingPaletteName') 
}); 

這裏最重要的是contrastDarkColors/contrastLightColors。 「對比度」顏色是顯示在按鈕上的文字(或圖標)顏色。

我猜你會想是

'contrastDefaultColor': 'light', 
'contrastDarkColors': ['50', '100', '200', '300', 'A100', 'A400'] 

編輯:如果您由於某種原因想上的按鈕顏色,創建有一類重要的是罰款,如!

.md-button.cyan-text { 
    color: cyan !important; 
} 

<md-button class="md-primary md-raised cyan-text">Hello world</md-button> 
+0

最好的,一直敲我的頭這一切下午,覺得我去盲目的文件,使用' 'contrastDefaultColor':「light''是完善。 – JohnC

相關問題