Angular Material主題配置

前言

     Angular Material是基於metarial design 的angular UI.當我們使用Material的時候，自然而然的就需要去使用它的主題顏色。這個時候我們就得選擇自己配置還是使用它的默認主題。注意：在使用Angular Material的時候請先引入（angular-material.css）、（angular.min.js、angular-animate.js、angular-aria.js、angular-material.js）。

默認調色板

    在介紹Material的默認主題是先介紹一下它的默認調色板：

    red, pink, purple, deep-purple,indigo, blue, light-blue, cyan, teal,green, light-green, lime, yellow, amber,orange, deep-orange, brown, grey, blue-grey

    直接貼代碼：

    js:

var app = angular.module('myApp',['ngMaterial']);
app.config(function($mdThemingProvider,$mdIconProvider){
    $mdThemingProvider.theme('default')
        /*括號內使我們定義的顏色，這些顏色必須是調色板中有的才可以*/
        .primaryPalette('pink')
        .accentPalette('orange')
        .warnPalette('red');
});

　　

　html:

<div layout="row" flex>
    <md-button class="md-raised md-primary">Click</md-button>
    <md-button class="md-raised md-accent">Click</md-button>
    <md-button class="md-raised md-warn">Click</md-button>
</div>

　效果：

 

   默認主題是特別簡單的，就簡單介紹這些了。

擴展現有調色板

    擴展現有調色板，顧名思義就是在Angular Material默認的調色板上去擴展，我們可以使用$mdThemingProvider.extendPalette去擴展現有的調色板，這里以紅色為例：

   js:

var app = angular.module('myApp',['ngMaterial']);
    app.config(function($mdThemingProvider,$mdIconProvider){
        /*對red默認調色板進行擴展*/
        var ysRed = $mdThemingProvider.extendPalette('red',{
            '100':'#fda8a8',
            '300':'#fc8080',
            '500':'#e84141',
            'A100':'#f52f2f'
        });
        $mdThemingProvider.definePalette('ysRed', ysRed);
       /*將擴展的調色板引入*/

        $mdThemingProvider.theme('default')
                .primaryPalette('ysRed',{
                    'default':'500',/*默認顏色*/
                    'hue-1':'100',
                    'hue-2':'300',
                    'hue-3':'A100',
                    /*ysRed的子顏色*/
                });
    });

　html:

<div layout="row" flex layout-align="center center">
    <md-button class="md-raised md-primary">Click</md-button>
    <md-button class="md-raised md-primary md-hue-2">Click</md-button>
    <md-button class="md-raised md-primary md-hue-2">Click</md-button>
    <md-button class="md-raised md-primary md-hue-3">Click</md-button>
</div>

　顯示效果：

   細心的同學已經發現了，為什么按鈕中的字顏色不一樣，而我們並沒有引入新的css樣式，這是因為在Material中默認的顏色調色板對於[50,100,200,300,400,A100]是采用暗色顯示，其他這是采用亮色顯示，當然我們也可以去重新定義它。

自定義調色板

   當然某些時候可能擴展現有的調色板並不能滿足我們的某些項目，這個時候我們就需要自定義一個或者多個調色板。

   js:

var app = angular.module('myApp',['ngMaterial']);
    app.config(function($mdThemingProvider,$mdIconProvider){
        
        /*引入自定義調色板*/
        $mdThemingProvider.definePalette('ysRed',{
            '50': 'fee8eb',
            '100': 'fedae0',
            '200': 'fdced5',
            '300': 'fcc2ca',
            '400': 'fcb4bf',
            '500': 'faa6b2',
            '600': 'fd91a1',
            '700': 'fd8294',
            '800': 'fe7589',
            '900': 'fc637a',
            'A100': 'fc4b66',
            'A200': 'f93e5a',
            'A400': 'fa2c4b',
            'A700': 'fa1839',
            /*注意：此處必須設定全->14種顏色*/

            /*設置默認顯示為亮色顯示*/
            'contrastDefaultColor': 'light',
            /*設置暗色顯示的顏色，可以為undefined*/
            'contrastDarkColors': ['50', '100', '200', '300', '400', '500'],
            /*當上面默認設定為亮色顯示，此處就為undefined*/
            /*反之則可以類似上面暗色顯示設定去設定*/
            'contrastLightColors': undefined
        });
        $mdThemingProvider.theme('default')
                .primaryPalette('ysRed',{
                    'default':'600',
                    'hue-1':'50',
                    'hue-2':'500',
                    'hue-3':'A700'
                })
    })

    html:

<div layout="row" flex layout-align="center center">
    <md-button class="md-raised md-primary">Click</md-button>
    <md-button class="md-raised md-primary md-hue-1">Click</md-button>
    <md-button class="md-raised md-primary md-hue-2">Click</md-button>
    <md-button class="md-raised md-primary md-hue-3">Click</md-button>
</div>

　效果顯示：