Material और Figma की मदद से डार्क थीम डिज़ाइन करना

1. खास जानकारी

Google I/O 2019 में, Material Design ने गहरे रंग वाली थीम बनाने के लिए दिशा-निर्देश पेश किए थे. इससे आपके प्रॉडक्ट की मौजूदा Material थीम को बेहतर बनाया जा सकता है. हल्के रंग वाली थीम, लंबे समय तक पढ़ने के लिए बेहतर होती हैं. साथ ही, इनसे टेक्स्ट ज़्यादा आसानी से पढ़ा जा सकता है. वहीं, गहरे रंग वाली थीम से कम रोशनी में स्क्रीन देखने में आसानी होती है और आंखों पर कम दबाव पड़ता है.

Material में, डार्क थीम को डिफ़ॉल्ट लाइट थीम के साथ इस्तेमाल करने के लिए डिज़ाइन किया गया है. इससे आपके ऐप्लिकेशन की यूनीक पहचान बनी रहती है. इसमें रंग, आकार, टाइप, और एलिवेशन के लिए स्टाइल शामिल हैं. साथ ही, इसे रात के हिसाब से तैयार किया गया है.

इस डिज़ाइन लैब में, हम आपको मौजूदा मटीरियल थीम के आधार पर गहरे रंग वाली थीम बनाने के लिए ज़रूरी चरणों के बारे में बताएंगे. इसके लिए, हम अपनी किसी एक मटीरियल स्टडी का इस्तेमाल करेंगे.

हम Reply के साथ मिलकर काम करेंगे. यह एक ईमेल ऐप्लिकेशन है. इसे साफ़ तौर पर समझने, पढ़ने में आसान होने, सहजता से इस्तेमाल करने, और आसानी से इस्तेमाल करने के लिए डिज़ाइन किया गया है. हम Reply की पहचान के बारे में जानेंगे. साथ ही, गहरे रंग वाली थीम बनाते समय, ऐप्लिकेशन में ब्रैंडेड मोमेंट को बनाए रखने के लिए सोच-समझकर फ़ैसले लेंगे.

हम थीम को और बेहतर बनाएंगे. साथ ही, कस्टम सर्फ़ेस कलर का इस्तेमाल करेंगे. ये कलर, गहरे रंग वाली बुनियादी थीम से अलग होंगे. इससे Reply की खास पहचान को फिर से हाइलाइट किया जा सकेगा.

ज़रूरी मटीरियल:

• Figma खाता

2. ज़रूरी फ़ाइलें इकट्ठा करना

शुरू करने से पहले, आपको हमारी Figma स्टार्टर फ़ाइल डाउनलोड करनी होगी. इस फ़ाइल में, डिज़ाइन लैब के लिए ज़रूरी सभी चीज़ें शामिल हैं.

• DarkTheme DesignLab Kit.fig डाउनलोड करें (7.6MB)

3. अपना एनवायरमेंट सेट अप करने का तरीका

इसके बाद, आपको डिज़ाइन एनवायरमेंट सेट अप करना होगा.

सबसे पहले, Figma में साइन इन करें या खाता बनाएं.

साइन इन करने के बाद, पिछली प्रोसेस में डाउनलोड की गई फ़ाइल को इंपोर्ट करें. इसके लिए, Figma फ़ाइलों की स्क्रीन पर सबसे ऊपर बाईं ओर मौजूद "फ़ाइल इंपोर्ट करें" आइकॉन ढूंढें. इसके बाद, "डाउनलोड" फ़ोल्डर में जाकर फ़ाइल ढूंढें.

कुछ समय निकालकर फ़ाइल को देखें. इसमें हल्के रंग वाली थीम, ऐप्लिकेशन के ब्रैंड के आधार पर पहले से तैयार किया गया टोनल पैलेट, और गहरे रंग वाली फ़ाइनल थीम की कॉपी शामिल है.

• दूसरे टैब में, डार्क थीम के लिए Material Design के दिशा-निर्देश खोलें. हम डिज़ाइन लैब में इन दिशा-निर्देशों का रेफ़रंस देंगे.

4. प्रॉडक्ट की पहचान के बारे में जानकारी

Reply के लिए डार्क थीम का इस्तेमाल शुरू करने से पहले, हमें Reply की ब्रैंडिंग से जुड़ी कुछ खास बातों को समझना होगा. इससे हमें अपनी थीम के बारे में सोच-समझकर फ़ैसले लेने में मदद मिलेगी. इससे Reply की पहचान और ब्रैंड को हल्के और गहरे, दोनों तरह के रंग वाली थीम में एक जैसा दिखाया जा सकेगा.

Reply का ब्रैंड, बातचीत पर ज़ोर देता है. ऐप्लिकेशन में फ़ंक्शनल क्वालिटी को प्राथमिकता दी जाती है. इसमें डिज़ाइन एलिमेंट के बजाय, इस्तेमाल में आसानी को प्राथमिकता दी जाती है.

इस डिज़ाइन लैब में, हमारे मकसद के लिए Reply में ब्रैंड को दिखाने वाले सबसे अहम एलिमेंट, रंग, टाइप, और शेप हैं.

रंग

Reply की कलर थीम में, गहरे नीले-स्लेटी रंग को मुख्य रंग के तौर पर इस्तेमाल किया गया है. इसे नारंगी-पीले रंग के साथ जोड़ा गया है.

सेकंडरी कलर का इस्तेमाल बहुत कम किया जाता है. इसलिए, Reply का यूज़र इंटरफ़ेस (यूआई) अक्सर मोनोक्रोमैटिक होता है. इसमें प्राइमरी कलर के अलग-अलग वर्शन का इस्तेमाल किया जाता है. इस रंग की थीम से, कॉन्टेंट को आसानी से पढ़ा जा सकता है. साथ ही, फ़ोटोग्राफ़िक अवतार आसानी से देखे जा सकते हैं.

इसलिए, Reply के सेकंडरी कलर का इस्तेमाल जहां भी किया जाता है वहां इसका असर बहुत ज़्यादा होता है. इससे अहम कार्रवाइयों पर ज़ोर दिया जाता है और पूरे ऐप्लिकेशन में ब्रैंडेड मोमेंट को साफ़ तौर पर दिखाया जाता है.

टाइप

Reply एक ऐसा ऐप्लिकेशन है जो टेक्स्ट वाले कॉन्टेंट और उसकी क्वालिटी पर ज़्यादा फ़ोकस करता है. इसलिए, टाइप और टाइपोग्राफ़ी, Reply की पहचान को ज़ाहिर करने में अहम भूमिका निभाते हैं. ऐप्लिकेशन में, टाइप स्केल के लिए Work Sans का इस्तेमाल किया जाता है. इसमें Work Sans के छह वर्शन शामिल हैं: Light, Regular, Medium, SemiBold, और Bold.

Work Sans से पूरे टाइप स्केल को बनाने पर, Reply को एक जैसी और अनुमानित, लेकिन ऑर्गैनिक और पढ़ने में आसान टाइपोग्राफ़ी मिलती है.

Work Sans के डिज़ाइनर वेई हुआंग के मुताबिक, इस फ़ॉन्ट फ़ैमिली को स्क्रीन पर इस्तेमाल करने के लिए ऑप्टिमाइज़ किया गया है. इससे ईमेल या अन्य कॉन्टेंट में मौजूद टेक्स्ट को आसानी से पढ़ा जा सकता है. यह फ़ॉन्ट, शुरुआती ग्रोटेस्क फ़ॉन्ट पर आधारित है. इसलिए, यह ज़्यादा आकर्षक और इंसानों के लिए ज़्यादा सहज है. साथ ही, इसमें शब्दों के बीच ज़्यादा जगह होने की वजह से, इसे आसानी से पढ़ा जा सकता है.

आकार

Reply में, अलग-अलग तरह के कॉम्पोनेंट का इस्तेमाल किया गया है. इसमें गोल और शार्प कॉम्पोनेंट को इस तरह से जोड़ा गया है कि ईमेल सूची की परफ़ॉर्मेंस और फ़ंक्शनल नेचर को बेहतर बनाया जा सके. साथ ही, मुख्य कार्रवाइयों और बड़े कॉम्पोनेंट को ज़्यादा आसान बनाया जा सके.

1. छोटे कॉम्पोनेंट
2. मीडियम कॉम्पोनेंट
3. बड़े कॉम्पोनेंट

बटन और FAB जैसे छोटे कॉम्पोनेंट पूरी तरह से गोल होते हैं. वहीं, ईमेल कार्ड और बॉटम ऐप्लिकेशन बार जैसे मीडियम कॉम्पोनेंट पूरी तरह से चौकोर होते हैं. खाता स्विच करने की सुविधा और बॉटम शीट जैसे बड़े कॉम्पोनेंट के कोने थोड़े गोल होते हैं.

ये शेप, उपयोगकर्ता को यह समझने में मदद करते हैं कि वे ऐप्लिकेशन में कहां हैं और हर कॉम्पोनेंट को कैसे बनाया गया है. साथ ही, यह भी समझने में मदद करते हैं कि यह कॉम्पोनेंट, बाकी इंटरफ़ेस से कैसे जुड़ा है.

जवाब देने वाले ईमेल की Material थीम

Reply की Material थीम की संरचना और फ़ंक्शन के बारे में ज़्यादा जानने के लिए, Material.io पर जाएं

5. रंगों का इस्तेमाल करना

डिफ़ॉल्ट रूप से उपलब्ध हल्के रंग वाली थीम में, Reply के ब्रैंड को दिखाने के लिए रंग का इस्तेमाल कैसे किया जाता है, यह जानने के बाद हम गहरे रंग वाली थीम के लिए, रंग पटल में ज़रूरी बदलाव कर सकते हैं. इससे गहरे रंग वाली थीम को इस्तेमाल करना आसान हो जाएगा और वह ज़्यादा असरदार दिखेगी.

Material में, कलर सिस्टम टोनल पैलेट पर आधारित होते हैं. ये पैलेट, आपके ब्रैंड के रंगों का इस्तेमाल करके, मिलते-जुलते वैरिएंट का एक सेट बनाते हैं. ये सभी वैरिएंट मिलकर एक ऐसा कलर सिस्टम बनाते हैं जिसे आपके ऐप्लिकेशन पर लागू किया जाता है. इससे, ऐप्लिकेशन की स्टाइल और पढ़ने में आसानी बनी रहती है.

Figma फ़ाइल में, Reply की प्राइमरी और सेकंडरी टोनल पैलेट देखे जा सकते हैं. हर पैलेट के ऊपर मौजूद हल्के रंग के ऐरो, Reply की लाइट थीम में इस्तेमाल की गई वैल्यू दिखाते हैं. वहीं, गहरे रंग के ऐरो उन वैरिएंट को दिखाते हैं जिनका इस्तेमाल हम डार्क थीम में करेंगे.

Material के साथ गहरे रंग वाली थीम बनाते समय, हल्के रंग के वैरिएंट चुने जाते हैं. इससे आपका कलर सिस्टम, आंखों पर ज़ोर डाले बिना सही कंट्रास्ट बनाए रख सकता है. ज़्यादा गहरे रंग, गहरे बैकग्राउंड के साथ "वाइब्रेट" करते हैं. इस वजह से, उन्हें पढ़ना मुश्किल हो जाता है. हल्के टोन से, एलिवेटेड सतहों के रंग में बदलाव करने में भी आसानी होती है. इसके बारे में हम जल्द ही जानेंगे.

6. सरफ़ेस के रंगों में बदलाव करना

अब हमारे पास Reply के टोनल पैलेट और डार्क थीम में इस्तेमाल किए जाने वाले रंगों की जानकारी है. इसलिए, अब समय आ गया है कि हम अपने मॉकअप में रंग की वैल्यू को अडजस्ट करना शुरू करें.

मटेरियल डार्क थीम में, इंटरफ़ेस की सबसे निचली लेयर आम तौर पर गहरे स्लेटी रंग की होती है. इसकी हेक्स वैल्यू #121212 होती है.

• Figma फ़ाइल में, "Reply Starter" नाम का आर्टबोर्ड ढूंढें. इसके बाद, "Background" नाम की लेयर चुनें.

• स्क्रीन की दाईं ओर मौजूद इंस्पेक्टर पैनल में, "भरें" में जाकर, रंग की वैल्यू को 121212 पर सेट करें और Return दबाएं.

• आपका आर्टबोर्ड ऐसा दिखना चाहिए:

Reply के मोनोक्रोमैटिक इनबॉक्स व्यू में, ईमेल कार्ड का रंग बैकग्राउंड से थोड़ा हल्का होता है. इसलिए, हमें डार्क थीम में कार्ड के लिए भी यही तरीका अपनाना चाहिए, ताकि इनबॉक्स की विज़ुअल हैरारकी बनी रहे.

• उसी आर्टबोर्ड पर, "ईमेल कार्ड" नाम के ग्रुप को बड़ा करें और "ईमेल कार्ड." नाम की सभी लेयर चुनें.
• पहले की तरह, इंस्पेक्टर पैनल में भरें वैल्यू चुनें. वैल्यू को 121212 पर सेट करें और Return दबाएं.
• अब सिर्फ़ "ईमेल कार्ड ओवरले." नाम की लेयर चुनें इन लेयर की मदद से, हम एक ऐसा ओवरले बना पाएंगे जो ईमेल कार्ड को उनके बैकग्राउंड से अलग करता है.
• लेयर में भरें और ओपैसिटी को 2% पर सेट करके, इसे FFFFFF बनाएं.

ईमेल कार्ड का रंग गहरा होने की वजह से, टेक्स्ट को पढ़ा नहीं जा सकता. इसके बाद, हम टेक्स्ट के रंगों के बारे में जानेंगे.

सरफ़ेस के रंग से जुड़े कभी-कभार आने वाले केस

ध्यान दें कि ज़्यादा अहमियत वाले कुछ Material कॉम्पोनेंट, जैसे कि स्नैकबार के लिए, हल्के रंग की सतहों का इस्तेमाल किया जाता है, ताकि सही मात्रा में ज़ोर बना रहे. Material Design स्पेसिफ़िकेशन में, खास मामलों और कस्टम लागू करने के बारे में ज़्यादा जानें.

7. टेक्स्ट के रंगों में बदलाव करना

डार्क थीम में टेक्स्ट के रंगों को समझने के लिए, यह जानना ज़रूरी है कि मटीरियल डिज़ाइन सिस्टम में टेक्स्ट पर रंग कैसे लागू किया जाता है.

Material कॉम्पोनेंट, "ऑन" कलर के बारे में बताते हैं. इन्हें यह नाम इसलिए दिया गया है, क्योंकि ये ऐसे रंग होते हैं जो कॉम्पोनेंट और मुख्य सर्फ़ेस के "ऊपर" दिखते हैं. ये कॉम्पोनेंट और मुख्य सर्फ़ेस, प्राइमरी, सेकंडरी, सर्फ़ेस, बैकग्राउंड या एरर कलर का इस्तेमाल करते हैं. "चालू" रंगों का इस्तेमाल मुख्य रूप से टेक्स्ट के लिए किया जाता है, ताकि यह पक्का किया जा सके कि टेक्स्ट इन सतहों पर पढ़ा जा सके.

Material में डिफ़ॉल्ट रूप से "चालू" होने पर दिखने वाले रंग, सफ़ेद (#FFFFFF) और काला (#000000) होते हैं. गहरे रंग वाले प्लैटफ़ॉर्म पर, काले या गहरे रंग का "चालू है" आइकॉन सही नहीं लगेगा. इसलिए, हम सफ़ेद रंग का इस्तेमाल करेंगे.

इस "चालू" रंग की मदद से, टेक्स्ट की हैरारकी तय करने की सिस्टम आसान है. ज़्यादा अहमियत वाले टेक्स्ट की ओपैसिटी 87% होती है. वहीं, सामान्य अहमियत वाले टेक्स्ट की ओपैसिटी 60% होती है. इसके अलावा, बंद किए गए टेक्स्ट की ओपैसिटी 38% होती है.

ज़्यादा प्राथमिकता वाले टेक्स्ट का रंग पूरी तरह से सफ़ेद नहीं होता. ऐसा इसलिए, क्योंकि जैसा कि पांचवें चरण में बताया गया है कि #FFFFFF—एक चमकदार रंग—हमारे गहरे रंग के बैकग्राउंड के साथ "वाइब्रेट" होगा. इसके अलावा, गहरे रंग के बैकग्राउंड पर बिलकुल सफ़ेद (#FFFFFF) टेक्स्ट का इस्तेमाल करने से, उसे पढ़ने में मुश्किल हो सकती है. ऐसा इसलिए, क्योंकि गहरे रंग के बैकग्राउंड पर टेक्स्ट की रोशनी धुंधली दिखती है.

इन सभी बातों को ध्यान में रखते हुए, आइए डार्क थीम में टेक्स्ट के रंगों को ठीक करें.

• हमारे स्टार्टर लेआउट में मौजूद सभी टेक्स्ट को आसानी से ऐक्सेस करने के लिए ग्रुप किया गया है. इनबॉक्स टेक्स्ट नाम का ग्रुप ढूंढें और उसे बड़ा करके, उसकी सभी लेयर देखें.
• "Hi -" से शुरू होने वाली सभी लेयर चुनें. ये हमारे लेआउट में मौजूद, ज़्यादा अहमियत वाले सभी टेक्स्ट हैं.
• इंस्पेक्टर पैनल में, Fill को FFFFFF पर सेट करें. साथ ही, ओपैसिटी को 87% पर सेट करें.
• इनबॉक्स टेक्स्ट ग्रुप में वापस जाएं. इसके बाद, "Med -" से शुरू होने वाली सभी लेयर चुनें
• इंस्पेक्टर पैनल में, भरें को FFFFFF पर सेट करें. साथ ही, ओपैसिटी को 60% पर सेट करें.

इनबॉक्स में मीडियम-एमफ़सिस वाला टेक्स्ट

आपको दिख सकता है कि ट्रेवर हैंसन के मैसेज (जिसका टाइटल हाई स्कूल रीयूनियन? है) की "इन्होंने भेजा" और "विषय" लाइन, दोनों को मीडियम-इम्फ़सिस के तौर पर मार्क किया गया है. इस उदाहरण में, कॉम्पोनेंट की स्थिति के बारे में बताने के लिए, टेक्स्ट पर ज़ोर देने और रंग का इस्तेमाल किया जा रहा है. इस मामले में, उपयोगकर्ता ने मैसेज पहले ही पढ़ लिया है. इसलिए, स्क्रीन पर मौजूद बिना पढ़े मैसेज की तुलना में इस पर कम ज़ोर दिया गया है.

8. कॉम्पोनेंट के रंगों में बदलाव करना

मटीरियल डिज़ाइन के साथ बनाई गई गहरे रंग वाली थीम में, एलिवेटेड सर्फ़ेस और कॉम्पोनेंट को ओवरले का इस्तेमाल करके रंग दिया जाता है. सतह जितनी ज़्यादा ऊंची होगी, ओवरले उतना ही मज़बूत और चमकदार होगा. जब बैकग्राउंड इतना गहरा हो कि उसमें परछाईं ठीक से न दिखें, तब ऊंचाई और क्रम दिखाने के लिए इस तरीके का इस्तेमाल किया जाता है.

बॉटम ऐप्लिकेशन बार

हम Reply के बॉटम ऐप्लिकेशन बार पर एक हल्का ओवरले लागू करेंगे. यह बॉटम ऐप्लिकेशन बार, इनबॉक्स के बाकी यूज़र इंटरफ़ेस (यूआई) से ऊपर होता है.

• लेयर की सूची में, Bottom app bar नाम का ग्रुप ढूंढें और उसे बड़ा करें, ताकि आपको उसकी कॉम्पोनेंट लेयर दिख सकें.
• उस ग्रुप में Surface नाम की लेयर ढूंढें. इसके बाद, उसकी Fill वैल्यू को 121212 पर सेट करें.
• इसके ऊपर मौजूद लेयर को ढूंढें. इसका नाम Surface overlay है. इसे भरें वैल्यू के तौर पर FFFFFF दें. साथ ही, ओपैसिटी 12% पर सेट करें.

फ़्लोटिंग ऐक्शन बटन

इसके बाद, हम FAB पर नया रंग लागू करेंगे. इसके लिए, उस टोनल पैलेट पर वापस जाएं जिसे हमने पहले देखा था. इसके बाद, जवाब देने के लिए इस्तेमाल किए जाने वाले सेकंडरी रंग की 700 वैल्यू को चुनें.

अगर आपको अपने ऐप्लिकेशन में छोटे, लेकिन ज़्यादा असर डालने वाले कॉम्पोनेंट के लिए कोई रंग चुनना है, तो आपके पास थोड़ा ज़्यादा सैचुरेटेड रंग चुनने का विकल्प होता है. हालांकि, यह ज़रूरी है कि वह रंग, बैकग्राउंड के रंगों के साथ सही कंट्रास्ट बनाए रखे. हम इस विकल्प के बारे में अगले चरण में जानेंगे.

• लेयर की सूची में, FAB नाम का ग्रुप ढूंढें और उसे बड़ा करके उसके कॉम्पोनेंट देखें.
• सरफ़ेस लेयर ढूंढें और उसे चुनें. इसके फ़िल को FCC13B पर सेट करें.

चुने गए कार्ड

आपको दिख सकता है कि Reply के इनबॉक्स में चुने गए ईमेल कार्ड के कोने पर भी, असरदार नारंगी-पीला रंग दिखता है. यह ब्रैंडिंग का एक और अहम हिस्सा है, लेकिन यह कॉम्पोनेंट, प्लैटफ़ॉर्म या टेक्स्ट में सही तरीके से फ़िट नहीं होता.

ऐसी स्थितियों में, हमारे सेकंडरी वैरिएंट कलर (इस मामले में #FFFBE6) से शुरुआत करना सबसे अच्छा होता है. इसके बाद, पीछे की ओर जाकर ऐसा रंग ढूंढें जो Reply के फ़ंक्शनल एस्थेटिक को ध्यान में रखते हुए, सही तरीके से एक्सप्रेसिव हो. जवाब देने के लिए, हम अपने सामान्य सेकंडरी वैरिएंट का इस्तेमाल कर सकते हैं.

• Earmark नाम की लेयर चुनें और उसके Fill को FFF5A0 पर सेट करें.

गहरे रंग वाली थीम में बटन के आइकॉन

खुशी की बात यह है कि Reply के फ़्लोटिंग ऐक्शन बटन पर दिखने वाले आइकॉन, डिफ़ॉल्ट रूप से हल्के रंग वाली थीम में पहले से ही गहरे रंग के होते हैं. इसलिए, गहरे रंग वाली थीम के उदाहरण में कोई बदलाव करने की ज़रूरत नहीं है. अपने ऐप्लिकेशन में, पक्का करें कि आइकॉन के बैकग्राउंड के हिसाब से उनका कंट्रास्ट सही हो. इसके लिए, "चालू" रंगों का सही तरीके से इस्तेमाल करें.

9. और भी बेहतर: कस्टम सर्फ़ेस

जैसा कि हमने पहले सीखा था, Reply में फ़्लोटिंग ऐक्शन बटन (या FAB) एक ऐसा कॉम्पोनेंट है जिस पर बहुत ज़्यादा ज़ोर दिया जाता है. यह ऐप्लिकेशन में एक मज़बूत ब्रैंडेड मोमेंट को भी दिखाता है. इस वजह से, हम Reply की डार्क थीम में इसके रंग को बनाए रखने का फ़ैसला कर सकते हैं. इसके लिए, Reply के ओरिजनल सेकंडरी रंग का इस्तेमाल किया जाता है.

• लेयर की सूची में, FAB नाम का ग्रुप ढूंढें और उसे बड़ा करके उसके कॉम्पोनेंट देखें.
• सरफ़ेस लेयर ढूंढें और उसे चुनें. इसके फ़िल को वापस F9AA33 पर सेट करें.

हम Reply के मुख्य रंग को भी वापस लाना चाहते हैं. इसे बॉटम ऐप्लिकेशन बार और ईमेल कार्ड के लिए, पसंद के मुताबिक बनाया गया सर्फ़ेस कलर के तौर पर इस्तेमाल किया जाएगा. इसके लिए, हमें सिर्फ़ ओवरले को बदलकर, टोनल पैलेट में बताए गए गहरे रंग का इस्तेमाल करना होगा.

• लेयर की सूची में, Bottom app bar नाम का ग्रुप ढूंढें और उसे बड़ा करें, ताकि आपको उसकी कॉम्पोनेंट लेयर दिख सकें.
• Surface overlay नाम की लेयर ढूंढें. इसके बाद, उसे 344955 की नई Fill वैल्यू दें. साथ ही, ओपैसिटी को 48% पर सेट करें. इससे, ब्रैंड के रंग को ज़्यादा बेहतर बनाया जा सकेगा. साथ ही, कंट्रास्ट को भी सही रखा जा सकेगा.
• लेयर की सूची में, ईमेल कार्ड ओवरले नाम की लेयर ढूंढें और उन सभी को चुनें.
• उनके Fill को ADC0CB पर सेट करें. साथ ही, ओपैसिटी को 4% पर सेट करें.

10. Wrapup

Material में, डार्क थीम को आपके प्रॉडक्ट की यूनीक पहचान के तौर पर डिज़ाइन किया गया है. यह पहचान, लाइट थीम में भी दिखती है. आपने रंग और एलिवेशन के तरीके में कुछ आसान बदलाव करके, अपनी पहली Material Dark थीम बना ली है. बधाई हो!

इस डिज़ाइन लैब में दिए गए चरणों को, अपने प्रॉडक्ट के लिए डार्क थीम को समझने और तय करने के फ़्रेमवर्क के तौर पर इस्तेमाल करें. साथ ही, अपने ब्रैंड और प्रॉडक्ट की प्रॉपर्टी और लक्ष्यों को हमेशा ध्यान में रखें.

डार्क थीम के बारे में ज़्यादा जानकारी के लिए, डार्क थीम के लिए Material Design स्पेसिफ़िकेशन देखें.

अगर आपका कोई सवाल है, तो @MaterialDesign on Twitter पर जाकर, हमसे कभी भी पूछें.

Google Design के YouTube चैनल पर, डिज़ाइन से जुड़ा ज़्यादा कॉन्टेंट और ट्यूटोरियल देखने के लिए बने रहें.