कोणीय सामग्री

Question

के लिए एक अंधेरे विषय को कॉन्फ़िगर करना मैं अपने वेबैप के लिए एक डिज़ाइन पर काम कर रहा हूं, और मुझे here के समान एक अंधेरा विषय चाहिए।

दुख की बात है कि मुझे 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();