कुछ शोध के बाद मैं इस निष्कर्ष के साथ समाप्त हुआ जिसने इसे मेरे लिए हल कर दिया, आशा है कि यह आपकी भी मदद करेगा।
Step1: ब्रांडिंग रंगों से अपने खुद के पैलेट बनाएं।
इस भयानक वेबसाइट को मिला जहां आप अपना ब्रांड रंग दर्ज करते हैं, और यह उस ब्रांड के विभिन्न रंगों के साथ एक पूर्ण पैलेट बनाता है: http://mcg.mbitson.com
मैंने इस टूल का उपयोग अपने primaryरंग (जो मेरा ब्रांड रंग है) और टूल दोनों के लिए किया हैaccent ।
Step2: अपनी कस्टम थीम फ़ाइल में पैलेट बनाएं
यहाँ एक गाइड है कि इस तरह की .scssफ़ाइल कैसे बनाई जाए : https://github.com/angular/material2/blob/master/guides/theming.md
@import '~@angular/material/theming';
// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core();
// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
50: #ffffff,
100: #dde6f3,
200: #b4c9e4,
300: #7fa3d1,
400: #6992c9,
500: #5282c1,
600: #4072b4,
700: #38649d,
800: #305687,
900: #284770,
A100: #ffffff,
A200: #dde6f3,
A400: #6992c9,
A700: #38649d,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
$bv-orange: (
50: #ffffff,
100: #fff7f4,
200: #fecdbd,
300: #fc9977,
400: #fc8259,
500: #fb6c3b,
600: #fa551d,
700: #f44205,
800: #d63a04,
900: #b83204,
A100: #ffffff,
A200: #fff7f4,
A400: #fc8259,
A700: #f44205,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent: mat-palette($bv-orange);
// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);
// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);
ऊपर दिए गए कोड पर कुछ स्पष्टीकरण
बाईं ओर की संख्याएं चमक के "स्तर" को निर्धारित करती हैं। डिफ़ॉल्ट 500 है (जो मेरे ब्रांड रंग / उच्चारण रंग की सही छाया है)। इसलिए इस उदाहरण में, मेरा ब्रांड रंग है #5282c1। बाकी उस रंग के अन्य शेड हैं (जहां कम संख्या का मतलब है तेज रंगों और उच्च संख्या का मतलब गहरा रंग होता है)। AXXXविभिन्न रूपों रहे हैं। निश्चित नहीं (अभी तक) जहां वे उपयोग में हैं। फिर, एक कम संख्या का मतलब है उज्जवल और उच्च संख्या का मतलब गहरा है।
contrastउन पृष्ठभूमि रंग से अधिक फ़ॉन्ट रंग सेट करता है। सीएसएस के माध्यम से गणना करना बहुत कठिन (या असंभव भी है) जहां फ़ॉन्ट उज्ज्वल (सफेद) या गहरा (0.87 अस्पष्टता के साथ काला) होना चाहिए, इसलिए यह अंधे लोगों को रंग देने के लिए भी आसानी से पठनीय है। इसलिए इसे मैन्युअल रूप से सेट किया जाता है और पैलेट की परिभाषा में हार्ड-कोड किया जाता है। आपको यह भी मैं ऊपर दिए गए पैलेट जनरेटर से प्राप्त करता हूं (हालांकि यह पुराने सामग्री 1 प्रारूप में आउटपुट किया जा रहा है, और आपको इसे मैन्युअल रूप से सामग्री 2 प्रारूप में बदलना होगा जैसे मैंने यहां पोस्ट किया है)।
रंग के रूप में ब्रांड रंग पैलेट का उपयोग करने के लिए थीम सेट करें primary, और आपके accentरंग के रूप में लहजे के लिए जो कुछ भी आपके पास है ।
Step3: जहाँ भी आप कर सकते हैं एप्लिकेशन भर में विषय का उपयोग करें
कुछ तत्व विषय रंग, की तरह ले जा सकते हैं <md-toolbar>, <md-input>, <md-button>, <md-select>और इतने पर। वे primaryडिफ़ॉल्ट रूप से उपयोग करेंगे इसलिए सुनिश्चित करें कि आपने ब्रांड रंग पैलेट को प्राथमिक के रूप में सेट किया है। यदि आप रंग बदलना चाहते हैं, तो colorनिर्देश का उपयोग करें (क्या यह कोणीय निर्देश है?)।
उदाहरण के लिए:
<button mat-raised-button color="accent" type="submit">Login</button>