配置角度材质的黑暗主题
我正在为我的webapp设计一个设计,并且我想要一个类似于这里看到的黑暗主题。
可悲的是,我发现角度材料理论文档非常难以理解; 没有提及每种颜色的使用位置,如何设置背景颜色或文字颜色等。
我目前正在使用:
.config(function($mdThemingProvider) {
$mdThemingProvider.definePalette('coolpal', {"50":"#d9ddec","100":"#a6b1d2","200":"#8190bf","300":"#5468a5","400":"#495b90","500":"#252830","600":"#354168","700":"#2a3453","800":"#20283f","900":"#161b2b","A100":"#252830","A200":"#a6b1d2","A400":"#495b90","A700":"#2a3453"});
$mdThemingProvider.definePalette('accentpal', {"50":"#ffffff","100":"#bfe7f7","200":"#8dd5f1","300":"#4ebee9","400":"#32b4e5","500":"#1ca8dd","600":"#1993c2","700":"#157fa7","800":"#126a8c","900":"#0e5570","A100":"#ffffff","A200":"#bfe7f7","A400":"#32b4e5","A700":"#157fa7"});
$mdThemingProvider.definePalette('warnpal', {"50":"#f0fdf9","100":"#adf4dc","200":"#7bedc7","300":"#3ce5ac","400":"#21e1a0","500":"#1bc98e","600":"#17ae7b","700":"#149368","800":"#107855","900":"#0d5d42","A100":"#f0fdf9","A200":"#adf4dc","A400":"#21e1a0","A700":"#149368"});
$mdThemingProvider.theme('default')
.primaryPalette('coolpal').dark()
.accentPalette('accentpal')
.warnPalette('warnpal')
.backgroundPalette('coolpal')
})
有一点黑色的颜色这工作正常,但如果我看着一个md-toolbar
的颜色,文本设置为rgba(0,0,0,0.87);
我不知道如何改变它; 我认为它会来自我的coolpal
主题中的某个地方,但事实并非如此。 以下是我的文本元素的样式:
如何更改$mdThemingProvider
以确保文本是浅色而不是不透明的黑色?
我会建议扩展一个现有的调色板,更容易..例如;
var myPalette = $mdThemingProvider.extendPalette('indigo', {
'500': '183863'
});
$mdThemingProvider.definePalette('mine', myPalette);
$mdThemingProvider.theme('default')
.primaryPalette('mine').dark();
链接地址: http://www.djcxy.com/p/88509.html