我想在我的应用程序中应用蓝色,浅蓝色,绿色和ornage阴影.我使用材料角度主题部分.但没有得到如何使用..我必须创建CSS？或者js或指令..
1.)首先通过
theme documentation here
原文链接：https://www.f2er.com/angularjs/143652.html2.)从调色板中选择颜色(link)
3.)使用您想要的颜色创建自己的自定义主题,并在app.config中定义它.
app.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('indigo')
.warnPalette('red')
.backgroundPalette('grey');
$mdThemingProvider.theme('custom')
.primaryPalette('grey')
.accentPalette('deep-purple')
.warnPalette('green')
//create yr own palette
$mdThemingProvider.definePalette('amazingPaletteName',{
'50': 'ffebee','100': 'ffcdd2','200': 'ef9a9a','300': 'e57373','400': 'ef5350','500': 'f44336','600': 'e53935','700': 'd32f2f','800': 'c62828','900': 'b71c1c','A100': 'ff8a80','A200': 'ff5252','A400': 'ff1744','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('custom2')
.primaryPalette('amazingPaletteName')
}
4.)然后在你的HTML上你可以使用这些主题
<div>
<md-button class="md-primary">I will be blue (by default)</md-button>
<div md-theme="custom">
<md-button class="md-primary">I will be grey(custom)</md-button>
</div>
<div md-theme="custom2">
<md-button class="md-primary">I will be red(custom2)</md-button>
</div>
</div>
