為Angular Material配置黑暗主題

Question

我正在為我的webapp設計一個設計，我想要一個類似於這里看到的黑暗主題。

可悲的是，我發現Angular Material Theming Docs非常難以理解; 沒有提到每種顏色的使用位置，如何設置背景顏色或文本顏色等。

我目前正在使用：

.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以確保文本是淺色而不是不透明的黑色？

Answer 1

我建議擴展現有的調色板，更容易..例如;

var myPalette = $mdThemingProvider.extendPalette('indigo', {
            '500': '183863'
        });
$mdThemingProvider.definePalette('mine', myPalette);
$mdThemingProvider.theme('default')
            .primaryPalette('mine').dark();