angular - मैं एंगुलर में कस्टम थीम पैलेट का उपयोग कैसे कर सकता हूं?



sass material-design (1)

मैं पूरे ऐप में अपनी कंपनी के ब्रांड रंगों का उपयोग करना चाहता हूं।

मुझे यह मुद्दा मिला है: AngularJS 2 - सामग्री डिज़ाइन - सेट रंग पैलेट जहां मैं कथित तौर पर कस्टम थीम बना सकता हूं, लेकिन यह मूल रूप से पूर्व-निर्मित पैलेट के विभिन्न हिस्सों का उपयोग कर रहा है। मैं Material2 के पूर्वनिर्धारित रंगों का उपयोग नहीं करना चाहता। मुझे अपने अनूठे और विशेष ब्रांड रंग चाहिए। वहाँ एक बेहतर तरीका है (राइटर?) मेरी खुद की विषयवस्तु बनाने की तुलना में, सिर्फ _palette.scss साथ चारों ओर हैक?

क्या मुझे अपने ब्रांड पैलेट के लिए मिक्सी बनाने की आवश्यकता है? यदि ऐसा है - कैसे ठीक से करने के लिए कोई गाइड? रंगों के विभिन्न रंगों के क्या अर्थ हैं (जैसे कि संख्याओं के साथ चिह्नित हैं: 50, 100, 200, A100, A200 ...)?

इस क्षेत्र के बारे में किसी भी जानकारी की बहुत सराहना की जाएगी!


कुछ शोध के बाद मैं इस निष्कर्ष के साथ समाप्त हुआ जिसने इसे मेरे लिए हल कर दिया, आशा है कि यह आपकी भी मदद करेगा।

Step1: ब्रांडिंग रंगों से अपने खुद के पैलेट बनाएं।

इस भयानक वेबसाइट को मिला जहाँ आप अपने ब्रांड का रंग दर्ज करते हैं, और यह उस ब्रांड के विभिन्न रंगों के साथ एक पूर्ण पैलेट बनाता है: http://mcg.mbitson.com

मैंने अपने primary रंग (जो मेरा ब्रांड रंग है) और accent रंग दोनों के लिए इस उपकरण का उपयोग किया।

Step2: अपनी कस्टम थीम फ़ाइल में पैलेट बनाएं

यहाँ एक गाइड है कि इस तरह की .scss फ़ाइल कैसे बनाई .scss : https://github.com/angular/material2/blob/master/guides/theming.md

@import '[email protected]/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>





angular-material2