2015-10-26 82 views
6

我正在爲我的webapp設計一個設計,我想要一個類似於here的黑暗主題。配置Angular Material的黑暗主題

很遺憾,我發現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主題的某個地方,但事實並非如此。下面是我的文本元素都被風格化:

Angular Material mdthemingprovider example

我怎樣才能改變$mdThemingProvider以保證文本是一個淺色而不是不透明的黑色?

+0

感謝您的發佈。我只是做了一些原型設計,不想花太多時間配置顏色。我希望有一個地方有幾個不同的定義調色板供人們複製和粘貼不同的主題。 –

回答

4

我會建議擴展一個現有的調色板,更容易..例如;

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

但是,我怎麼知道哪些元素將會受到每種顏色變化的影響?看來,文字尤其是來自無處,特別是在你的主題... – Jascination

+0

據我記得,對於黑暗的主題,這只是在我的情況下工作,自動恢復字體顏色。你可以繼續瀏覽生成的css,看看黑暗是如何工作的。 – mentat