Konfigurieren eines dunklen Themas für Angular Material

Question

Ich arbeite an einem Design für meine Webapp, und ich möchte ein dunkles Thema ähnlich wie here gesehen.

Leider habe ich die Angular Material Theming Docs sehr schwer gefunden, meinen Kopf herum zu bekommen; keine Erwähnung von wo jede Farbe verwendet werden, wie eine Hintergrundfarbe oder eine Textfarbe setzen usw.

ich zur Zeit mit:

.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') 
}) 

Mit etwas Hacking von Farben das funktioniert ok, aber wenn ich mir die Farben in einer md-toolbar anschaue, wird der Text auf rgba(0,0,0,0.87); gesetzt und ich habe keine Ahnung, wie ich es ändern soll; Ich nahm an, dass es von irgendwo in meinem coolpal Thema kommen würde, aber es ist nicht. Hier ist, wie meine Textelemente gestylt werden:

Wie kann ich $mdThemingProvider ändern den Text, um sicherzustellen, eine helle Farbe ist eher als undurchsichtig schwarz?

Answer 1

Ich würde vorschlagen, eine vorhandene Palette zu erweitern, viel einfacher .. wie;

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