首页 > 代码库 > Angular Material主题配置
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>
效果显示：
Angular Material的主题配置介绍就到这里，如果可以的话可以到它的官网上去学习它的使用，很好的哦！
Angular Material主题配置