डार्क मोड डिज़ाइन: पहली थीम को बिगाड़े बिना दूसरी थीम कैसे शिप करें
डार्क मोड के लिए एक प्रैक्टिसिंग डिज़ाइनर की गाइड। वह कलर गणित जो सच में काम करता है, कंपोनेंट के जाल जिनसे बचना है, और ऐसी डार्क थीम कैसे शिप करें जो उल्टी की हुई नहीं, डिज़ाइन की हुई लगे।
ज़्यादातर डार्क मोड डिज़ाइन नहीं किए जाते, बस उलट दिए जाते हैं। डिज़ाइनर बैकग्राउंड को काले के करीब कर देता है, टेक्स्ट को सफ़ेद के करीब रंग देता है, और कह देता है काम हो गया। नतीजा एक ऐसी थीम जो कठोर दिखती है, लाइट वर्शन से बुरी पढ़ी जाती है, और ब्रांड को ऐसा बना देती है जैसे गलत रोशनी में कोई दूसरा प्रोडक्ट हो।
यह पेपर उसका काम करने वाला वर्शन है। वह कलर गणित जो डार्क थीम को सोचा-समझा बनाता है, वे कंपोनेंट जाल जो अंधेरे में टूट जाते हैं, और वह टोकन स्ट्रक्चर जो प्रोडक्ट बढ़ने पर दोनों थीम को एक साथ रखता है। कोई Dribbble ग्रेडिएंट नहीं, बस ऐसी डार्क थीम जो डिज़ाइन सिस्टम में अपनी जगह कमाती है।
डार्क मोड असल में क्या है
डार्क मोड एक पूरी दूसरी थीम है, रंगों का उलटाव नहीं। इसका अपना सरफेस लॉजिक है, अपने कंट्रास्ट नियम हैं, और टाइपोग्राफी के वज़न के अपने समायोजन हैं। असली डार्क मोड उसी कंपोनेंट सेट के सामने शुरू से डिज़ाइन किया जाता है और फिर साझा टोकन के ज़रिए लाइट थीम से मिलाया जाता है।
इनवर्ट करने का शॉर्टकट एक खास वजह से फेल होता है। लाइट मोड सफ़ेद सरफेस पर निर्भर है जो गहराई को ऊपर की ओर लौटाते हैं। डार्क मोड इसे उलट नहीं सकता, क्योंकि शुद्ध काले सरफेस गहराई बनाते नहीं, सोख लेते हैं। पूरा एलिवेशन सिस्टम दोबारा बनाना पड़ता है। डिज़ाइन सिस्टम गाइड का ब्रेकडाउन बताता है कि यह काम अलग-अलग कंपोनेंट में नहीं, टोकन के भीतर क्यों होना चाहिए।
2026 में डार्क मोड क्यों मायने रखता है
तीन कारण। एक भी सौंदर्य का नहीं।
OLED डिस्प्ले पर बैटरी लाइफ। OLED पैनल पर हर काला पिक्सेल शून्य पावर खींचता है। फ़ोन पर डार्क इंटरफ़ेस हाई ब्राइटनेस सेटिंग में डिस्प्ले की पावर खपत 30 से 60 प्रतिशत घटा सकता है। मोबाइल यूज़र के लिए डार्क थीम पहले बैटरी फीचर है, फिर विज़ुअल।
रोशनी के प्रति संवेदनशीलता के लिए एक्सेसिबिलिटी। माइग्रेन, एस्टिग्मैटिज़्म या फोटोफोबिया वाले यूज़र लंबे समय तक लाइट इंटरफ़ेस आराम से नहीं चला सकते। डार्क मोड शिप करना एक एक्सेसिबिलिटी प्रतिबद्धता है, पसंद नहीं। वेब एक्सेसिबिलिटी चेकलिस्ट बताती है कि थीमिंग पूरे ऑडिट में कहाँ फिट होती है।
यूज़र की अपेक्षा। ऑपरेटिंग सिस्टम डार्क मोड टॉगल के साथ आते हैं जो पूरे OS पर लागू होता है। जो प्रोडक्ट सिस्टम सेटिंग को अनदेखा करे, पुराना लगता है। यूज़र ऐप स्टोर और एक्सटेंशन डायरेक्टरी को डार्क मोड सपोर्ट से फ़िल्टर करते हैं। डार्क थीम का न होना सिर्फ UI की कमी नहीं, मार्केटिंग की समस्या है।
पहला नियम: कभी शुद्ध काला मत इस्तेमाल करो
शुद्ध काला (#000000) नए डार्क मोड की सबसे आम गलती है। यह सही लगता है क्योंकि यह सबसे गहरा सरफेस लगता है। पर यह गलत पढ़ा जाता है क्योंकि इंसानी आँख परफ़ेक्ट काले के सामने गहराई का अंदाज़ा नहीं लगा पाती।
समाधान: बेस सरफेस के लिए हल्के ब्रांड ह्यू वाला गहरा ग्रे इस्तेमाल करें। ज़्यादातर प्रोडक्ट के लिए #0B0B10 से #121218 के बीच का कोई मान, कभी-कभी #1A1A1F तक। सही मान ब्रांड के कलर टेम्परेचर पर निर्भर है। गर्म ब्रांड थोड़ा गर्म डार्क लेता है। ठंडा ब्रांड थोड़ा ठंडा डार्क। शुद्ध न्यूट्रल बेजान पढ़ा जाता है।
यही नियम सबसे ऊँचे कंट्रास्ट वाले टेक्स्ट पर भी लागू होता है। डार्क सरफेस पर शुद्ध सफ़ेद (#FFFFFF) हैलेशन बनाता है, यानी चमकीले किनारों का धुंधलापन, जिससे छोटा टेक्स्ट पढ़ते-पढ़ते थकान होती है। टेक्स्ट को लगभग #E8E8EA तक गिराएँ या 85 से 92 प्रतिशत ओपैसिटी वाला सफ़ेद लगाएँ। यह गिरावट आँख को दिखती नहीं, पर पठनीयता के लिए बहुत बड़ी है।
डार्क मोड में सरफेस एलिवेशन
लाइट मोड शैडो से दिखाता है कि कार्ड बैकग्राउंड के ऊपर है। डार्क मोड ऐसा नहीं कर सकता, क्योंकि शैडो गहरे सरफेस में निगल ली जाती हैं। तरीका है हल्केपन के ज़रिए एलिवेशन।
हर एलिवेशन स्टेप सरफेस को हल्का करता है, गहरा नहीं। बेस सरफेस के ऊपर बैठा कार्ड बेस से थोड़ा हल्का होता है। कार्ड के ऊपर बैठा मोडल और हल्का। डार्क इंटरफ़ेस में गहराई ऐसे पढ़ी जाती है जैसे सरफेस की एक ढलान यूज़र की ओर चढ़ रही हो, न कि नीचे गिरती शैडो।
Material Design ने इसे पाँच स्टेप के एलिवेशन स्केल में औपचारिक रूप दिया, और यह बुनियादी विचार किसी भी डिज़ाइन सिस्टम में टिकता है। ज़्यादातर प्रोडक्ट के लिए एक काम करने वाला स्केल:
| एलिवेशन | उदाहरण | सरफेस मान |
|---|---|---|
| 0 | बेस बैकग्राउंड | #0E0E12 |
| 1 | कार्ड, इनपुट फ़ील्ड | #17171C |
| 2 | उभरा कार्ड, मेन्यू | #1F1F25 |
| 3 | मोडल, डायलॉग | #28282F |
| 4 | पॉपओवर, टूलटिप | #31313A |
सटीक संख्याएँ ब्रांड के हिसाब से बदलती हैं, पर लॉजिक नहीं। हर उभरा सरफेस अपने नीचे वाले से हल्का है, हर शैडो हल्की है, और हायरार्की ऐसे पढ़ी जाती है जैसे सरफेस अंतरिक्ष में रखे हों, न कि पन्ने पर बने डिब्बे।
डार्क थीम के लिए कंट्रास्ट गणित
कंट्रास्ट रेशियो ग्लॉसरी WCAG की बुनियादी सीमा बताती है: सामान्य टेक्स्ट के लिए 4.5 से 1 और बड़े टेक्स्ट के लिए 3 से 1। डार्क मोड इन नियमों को ढीला नहीं करता, पर इन्हें पूरा करने का तरीका बदल देता है।
लाइट मोड में सफ़ेद बैकग्राउंड पर लगभग #222 का बॉडी टेक्स्ट करीब 16 से 1 पर पहुँचता है। डिज़ाइनर न्यूनतम सीमा के ऊपर भारी गुंजाइश के आदी होते हैं। डार्क मोड में यह तंग है। #0E0E12 पर #E0E0E0 का बॉडी टेक्स्ट लगभग 13 से 1 पर आता है, जो अब भी मज़बूत है, पर गलती की गुंजाइश कम है। लुक नरम करने के लिए टेक्स्ट को #B0B0B0 तक गिराना चुपचाप किसी सेक्शन को 4.5 से 1 के नीचे धकेल सकता है।
अनुशासन यह है: डार्क मोड का हर रंग फ़ैसला कंट्रास्ट चेकर से गुज़रे। थीम में एक बार नहीं, हर टोकन जोड़ी के लिए एक बार। बेस सरफेस पर टेक्स्ट, कार्ड पर टेक्स्ट, मोडल पर टेक्स्ट, प्लेसहोल्डर टेक्स्ट, डिसेबल्ड टेक्स्ट, लिंक टेक्स्ट। हर जोड़ी की अलग जाँच।
एक आम जाल म्यूटेड टेक्स्ट टोकन है। लाइट मोड में सफ़ेद पर #666 का म्यूटेड टेक्स्ट 5.7 से 1 पर साफ़ पढ़ा जाता है। #0E0E12 पर उलटकर #999 करने पर अनुपात लगभग 4.2 से 1 रह जाता है, जो WCAG AA में फेल है। इनवर्ट का शॉर्टकट एक्सेसिबिलिटी अनुपालन को चुपचाप तोड़ देता है, और ज़्यादातर टीमों को तब तक पता नहीं चलता जब तक ऑडिट इसे पकड़ न ले।
डार्क मोड में रंग: सिर्फ़ वैल्यू नहीं, सैचुरेशन भी
जो ब्रांड रंग सफ़ेद बैकग्राउंड पर गाते हैं, वे डार्क पर अक्सर मटमैले या बिजली जैसे चुभने वाले लगते हैं। वजह यह है कि गहरे सरफेस महसूस होने वाले सैचुरेशन को बढ़ा देते हैं। लाइट सरफेस पर 100 प्रतिशत सैचुरेटेड एक्सेंट आत्मविश्वासी लगता है। डार्क सरफेस पर वही एक्सेंट रेडियोएक्टिव लगता है।
नियम है कि डार्क थीम के लिए एक्सेंट रंग का सैचुरेशन आमतौर पर 10 से 20 प्रतिशत घटाएँ और उन्हें थोड़ा हल्का करें। सफ़ेद पर #3455FF वाला प्राइमरी बटन डार्क पर #5C78FF हो सकता है। वही ह्यू फ़ैमिली, नए कंट्रास्ट माहौल के हिसाब से ढली हुई। ब्रांड फिर भी ब्रांड ही पढ़ा जाता है। बस अब आँखों को चुभता नहीं।
कलर पैलेट ग्लॉसरी वह बुनियादी ढाँचा बताती है जिसके भीतर यह समायोजन रहता है। अच्छा डार्क मोड नए रंग नहीं गढ़ता, वह उन्हीं ब्रांड रंगों का एक समानांतर सेट शिप करता है जो नए सरफेस संदर्भ के लिए ट्यून किया गया हो।
कंपोनेंट के जाल जो अंधेरे में टूटते हैं
ज़्यादातर कंपोनेंट को डार्क मोड के लिए कम से कम एक समायोजन चाहिए। कुछ बिना उसके पूरी तरह टूट जाते हैं। ये रहे आम गुनहगार।
बॉर्डर मुख्य विभाजक बन जाते हैं
लाइट मोड में हल्की शैडो या मुश्किल से दिखने वाला बॉर्डर कंपोनेंट को अलग करता है। डार्क मोड में शैडो गायब हो जाती हैं और ज़्यादातर बॉर्डर भी ओझल हो जाते हैं। कंपोनेंट के किनारे तय करने का मुख्य औज़ार बॉर्डर बन जाता है, और दिखते रहने के लिए अक्सर उसे लाइट मोड के #EEE जैसे मान से बढ़ाकर डार्क मोड में लगभग #2A2A30 करना पड़ता है।
टेस्ट यह है कि लैपटॉप पर UI को 80 प्रतिशत ब्राइटनेस में देखें। अगर कंपोनेंट के किनारे गायब होने लगें, तो डार्क थीम में बॉर्डर टोकन को ज़्यादा चमकीला मान चाहिए।
शैडो का मकसद उलट जाता है
लाइट मोड में शैडो सरफेस को नीचे और दूर धकेलती हैं। डार्क मोड में शैडो को सरफेस के ऊपर और आगे आने का आभास देना पड़ता है। यह आमतौर पर एक बहुत हल्के उजले सरफेस (एलिवेशन) और नीचे एक लगभग अदृश्य गहरी शैडो के मेल से होता है, जो बिना दिखे वज़न जोड़ती है।
डार्क मोड के लिए काम करने वाली शैडो जोड़ी:
- बाहरी:
0 4px 12px rgba(0, 0, 0, 0.5)एलिमेंट को ज़मीन देने के लिए - अंदरूनी ऊपरी हाइलाइट:
inset 0 1px 0 rgba(255, 255, 255, 0.05)उठे हुए किनारे का आभास देने के लिए
साथ इस्तेमाल करने पर कंपोनेंट कटे हुए की जगह उभरा हुआ पढ़ा जाता है। अकेले इस्तेमाल करने पर कोई भी असर पढ़ा ही नहीं जाता।
डिसेबल्ड स्टेट गायब हो जाते हैं
लाइट मोड में डिसेबल्ड बटन आमतौर पर सफ़ेद पर डीसैचुरेटेड ग्रे होता है। डार्क मोड में वही ट्रीटमेंट बटन को सरफेस में पूरी तरह घोल देता है। समाधान है डिसेबल्ड स्टेट की ओपैसिटी बढ़ाना, घटाना नहीं। उभरे सरफेस रंग के ऊपर लगभग 40 प्रतिशत ओपैसिटी, न कि फीके ग्रे पर गिरना। डिसेबल्ड स्टेट अब भी बटन जैसा पढ़ा जाना चाहिए, बस निष्क्रिय।
इमेज और इलस्ट्रेशन को अपना ट्रीटमेंट चाहिए
सफ़ेद बैकग्राउंड पर खींची गई प्रोडक्ट फ़ोटो डार्क सरफेस पर टूटी हुई लगती है। सफ़ेद स्ट्रोक से बना ब्रांड इलस्ट्रेशन पूरी तरह गायब हो जाता है। इमेज को अपना डार्क-मोड पास चाहिए, चाहे अलग असेट से, बैकग्राउंड बदलकर, या सावधानी से ट्यून किए फ़िल्टर से। डार्क मोड का यह सबसे महँगा हिस्सा है जिसे सही शिप करना होता है, और यही वह हिस्सा है जिसे ज़्यादातर टीमें काट देती हैं।
जो टीमें समानांतर इमेज असेट शिप नहीं कर सकतीं, उनके लिए व्यावहारिक हल: डार्क मोड में हर इमेज कंटेनर में नरम बैकग्राउंड जोड़ें, लगभग #F5F5F7, गोल कोनों के साथ। जो इमेज सफ़ेद पर शूट हुई थीं, अब हल्के कंटेनर पर बैठती हैं, और बाकी UI डार्क रहता है।
इनपुट फ़ोकस स्टेट को ज़्यादा कंट्रास्ट चाहिए
सफ़ेद बैकग्राउंड पर काम करने वाला नीला फ़ोकस रिंग गहरे सरफेस पर असर खो देता है। फ़ोकस स्टेट ग्लॉसरी WCAG द्वारा ज़रूरी focus-visible संकेतक बताती है। डार्क मोड में फ़ोकस रिंग को अक्सर अपने लाइट-मोड जुड़वाँ से 10 से 20 प्रतिशत ज़्यादा चमकीला या मोटा होना पड़ता है। एक्सेसिबिलिटी की ज़रूरत वही रहती है, पर उसे पूरा करने के लिए विज़ुअल ट्रीटमेंट को ढलना पड़ता है।
दोहरी थीम के लिए टोकन स्ट्रक्चर
जो डार्क मोड CSS ओवरराइड में रहता है, वह भटकेगा ही। हर नया कंपोनेंट थीमिंग अलग तरह से संभालेगा, और छह महीने में प्रोडक्ट में तीन थीमिंग पैटर्न आपस में झगड़ रहे होंगे।
सही ढाँचा सिमैंटिक टोकन है। डिज़ाइन टोकन ग्लॉसरी बुनियादी अवधारणा बताती है। डार्क मोड वह उपयोग-मामला है जो साबित करता है कि टोकन वैकल्पिक नहीं हैं।
टोकन की तीन परतें:
परत एक: प्रिमिटिव। कच्चे रंग मान। color.neutral.900, color.brand.500। कोई राय नहीं, कोई संदर्भ नहीं।
परत दो: सिमैंटिक। भूमिका-आधारित नाम। color.surface.base, color.surface.raised, color.text.primary, color.text.muted, color.border.default। हर सिमैंटिक टोकन एक प्रिमिटिव की ओर इशारा करता है।
परत तीन: थीम। दो पूरे मैप, हर थीम का एक, जो तय करते हैं कि हर सिमैंटिक टोकन किस प्रिमिटिव पर पहुँचेगा। लाइट थीम color.surface.base को color.neutral.50 से जोड़ती है। डार्क थीम color.surface.base को color.neutral.900 से जोड़ती है।
कंपोनेंट सिर्फ़ सिमैंटिक टोकन इस्तेमाल करते हैं। वे कभी सीधे प्रिमिटिव का हवाला नहीं देते, और कभी थीम हार्डकोड नहीं करते। थीम स्विचर मैप बदलता है, कंपोनेंट दोबारा बनते हैं, और कुछ नहीं टूटता। दो डिज़ाइनरों की टीम से आगे यही एकमात्र पैटर्न है जो स्केल करता है।
सिस्टम प्रेफ़रेंस का सम्मान
ब्राउज़र CSS मीडिया क्वेरी के ज़रिए prefers-color-scheme देता है। प्रोडक्ट को इसका सम्मान करना ही होगा। जिस यूज़र ने OS स्तर पर डार्क मोड चालू किया है, उसका डिफ़ॉल्ट अनुभव डार्क थीम है, बस। ऐप के भीतर टॉगल एक सुधार है, विकल्प नहीं।
सही इम्प्लीमेंटेशन के तीन नियम:
पहले लोड पर सिस्टम प्रेफ़रेंस को डिफ़ॉल्ट बनाएँ। सिर्फ़ इसलिए कि डिज़ाइनर को लाइट मॉकअप पसंद हैं, यूज़र के OS चुनाव को कभी लाइट थीम से ओवरराइड न करें।
यूज़र का ऐप के भीतर का चुनाव सहेजें। अगर यूज़र ऐप में डार्क पर टॉगल करता है, तो वह चुनाव रिफ़्रेश के बाद भी बना रहे और जब तक वह रीसेट न करे, सिस्टम प्रेफ़रेंस से ऊपर रहे।
"सिस्टम से मिलाएँ" विकल्प दें। जो यूज़र चाहते हैं कि OS सेटिंग ही चले, उन्हें उस व्यवहार पर लौटने का रास्ता चाहिए। तीन-स्टेट टॉगल (लाइट, डार्क, सिस्टम) अपेक्षित पैटर्न है और डिफ़ॉल्ट रूप से शिप होना चाहिए।
डार्क मोड की टेस्टिंग
डार्क मोड के बग छिपे रहते हैं। कंपोनेंट डिज़ाइन फ़ाइल में ठीक दिखता है, लाइट थीम में कोड रिव्यू पास कर लेता है, और ऐसी कंट्रास्ट विफलता के साथ शिप होता है जो तभी दिखती है जब कोई यूज़र उसे रात में खोले। टेस्टिंग का अनुशासन आक्रामक होना चाहिए।
ब्राइटनेस टेस्ट। अँधेरे कमरे में लैपटॉप पर 30 प्रतिशत ब्राइटनेस पर प्रोडक्ट खोलें। जो कुछ गायब हो, जो कुछ धुंधला पड़े, जो कुछ असहज रूप से चमके, उसे बग की तरह दर्ज करें। इससे वे बॉर्डर पकड़े जाते हैं जो बहुत हल्के हैं, वह टेक्स्ट जो बहुत चमकीला है, और वे एक्सेंट रंग जो अब भी बहुत सैचुरेटेड हैं।
कंट्रास्ट ऑडिट। हर थीम बदलाव सभी सिमैंटिक जोड़ियों पर पूरी कंट्रास्ट जाँच चलाता है। axe, WAVE या Figma का बिल्ट-इन कंट्रास्ट चेकर जैसे टूल वे रिग्रेशन पकड़ते हैं जो विज़ुअल रिव्यू चूक जाता है।
स्क्रीनशॉट डिफ़। हर रिलीज़ पर हर अहम स्क्रीन के लाइट और डार्क मोड स्क्रीनशॉट लिए जाते हैं। विज़ुअल डिफ़ अनचाहे थीम भटकाव को यूज़र से पहले उजागर कर देते हैं।
असली डिवाइस टेस्ट। OLED फ़ोन डार्क सरफेस को LCD लैपटॉप से अलग रेंडर करते हैं। MacBook पर परफ़ेक्ट दिखने वाला डार्क मोड अक्सर iPhone पर बैंडिंग या कठोर ट्रांज़िशन दिखाता है। असली फ़ोन पर टेस्ट करें, सिर्फ़ ब्राउज़र के डिवाइस एमुलेटर पर नहीं।
डार्क मोड की आम विफलताएँ
तीन पैटर्न डार्क मोड की ज़्यादातर शिप क्वालिटी समस्याएँ पैदा करते हैं। तीनों ऊपर के टोकन स्ट्रक्चर से टाले जा सकते हैं।
आधा-उलटा UI। मुख्य सरफेस डार्क हो गए, पर दबे हुए कंपोनेंट (मोडल, टूलटिप, मार्केटिंग पेज, पुरानी एडमिन स्क्रीन) अब भी लाइट मोड में शिप हो रहे हैं। यूज़र डार्क टॉगल करता है और क्लिक करते ही आधा प्रोडक्ट वापस सफ़ेद हो जाता है। समाधान प्रोडक्ट के हर सरफेस का ऑडिट है, एक चेकलिस्ट के साथ जो हर स्क्रीन की थीम कवरेज ट्रैक करे।
टूटा हुआ ब्रांड पल। मार्केटिंग लैंडिंग पेज लाइट रहते हैं जबकि प्रोडक्ट डार्क हो जाता है, या इसका उलटा। यूज़र की यात्रा में ब्रांड आइडेंटिटी बिखर जाती है, और प्रोडक्ट दो कंपनियों जैसा लगता है। समाधान शुरू में ही तय करना है कि मार्केटिंग साइट डार्क मोड शिप करेगी या नहीं। दोनों चुनाव वैध हैं, पर दोनों सरफेस का मेल बैठना चाहिए।
एक्सेसिबिलिटी रिग्रेशन। लाइट मोड WCAG AA अनुपालन के साथ शिप होता है, डार्क मोड तीन जगह चूक जाता है, और अनुपालन ऑडिट तक कोई जाँच नहीं करता। समाधान है सिमैंटिक टोकन परत और CI में स्वचालित कंट्रास्ट जाँच। हर PR कंट्रास्ट जाँच चलाता है। विफलता मर्ज रोक देती है।
अगर आपको ऐसी टीम चाहिए जो डार्क मोड को टोकन से टेस्टिंग तक पहली श्रेणी के सिस्टम फ़ैसले की तरह शिप करे, तो Brainy को हायर करें। डार्क मोड शायद ही कभी कठिन समस्या होती है। कठिन समस्या है जोड़ी को बिना भटकाव के शिप करना।
FAQ
क्या शुद्ध काला डार्क मोड के लिए सबसे अच्छा बैकग्राउंड है?
नहीं। शुद्ध काला (#000000) सफ़ेद टेक्स्ट के साथ कठोर कंट्रास्ट बनाता है और वे विज़ुअल गहराई संकेत हटा देता है जो आँख को एलिवेशन पढ़ने के लिए चाहिए। हल्के ब्रांड टिंट वाला गहरा ग्रे इस्तेमाल करें, आमतौर पर #0B0B10 से #121218 के दायरे में। डार्क इंटरफ़ेस में गहराई ऐसे पढ़ी जाती है जैसे सरफेस यूज़र की ओर चढ़ रहे हों, जिसके लिए ऐसा शुरुआती सरफेस चाहिए जो शुद्ध काला न हो।
शैडो के बिना डार्क मोड में एलिवेशन कैसे करें?
डार्क मोड में एलिवेशन हल्केपन से आता है, शैडो से नहीं। हर उभरा सरफेस अपने नीचे वाले से थोड़ा हल्का होता है, जिससे यूज़र की ओर ऊपर चढ़ते सरफेस की ढलान बनती है। हल्की गहरी शैडो और बहुत फीका ऊपरी हाइलाइट असर को मज़बूत कर सकते हैं, पर मुख्य संकेत सरफेस का रंग ही है।
क्या डार्क मोड को बस लाइट थीम के रंग उलट देने चाहिए?
नहीं। उलटने से एक्सेंट रंग असहज स्तर तक सैचुरेट हो जाते हैं, म्यूटेड टेक्स्ट WCAG कंट्रास्ट सीमा से नीचे गिर जाता है, और शैडो पर निर्भर एलिवेशन मॉडल टूट जाता है। डार्क मोड उसी कंपोनेंट सेट के सामने शुरू से डिज़ाइन की गई दूसरी थीम है, जिसे फिर साझा सिमैंटिक टोकन से मिलाया जाता है।
डार्क मोड में इमेज और फ़ोटो कैसे संभालूँ?
सफ़ेद बैकग्राउंड पर शूट की गई इमेज थीम की निरंतरता तोड़ती हैं। विकल्प: डार्क मोड के लिए समानांतर असेट शिप करें, डार्क मोड सक्रिय होने पर हर इमेज के चारों ओर हल्का कंटेनर जोड़ें, या फ़िल्टर सावधानी से लगाएँ। इलस्ट्रेशन को अक्सर अलग डार्क-मोड वेरिएंट चाहिए। यह डार्क मोड का सबसे महँगा हिस्सा है और सबसे ज़्यादा छोड़ा जाने वाला भी।
दोहरी थीम सपोर्ट के लिए टोकन कैसे स्ट्रक्चर करूँ?
तीन परतें। प्रिमिटिव (कच्चे रंग मान), सिमैंटिक टोकन (color.surface.base जैसे भूमिका-आधारित नाम), और थीम मैप (हर थीम का एक, जो हर सिमैंटिक टोकन को प्रिमिटिव तक पहुँचाता है)। कंपोनेंट सिर्फ़ सिमैंटिक टोकन इस्तेमाल करते हैं, इसलिए थीम स्विचर मैप बदलता है और कुछ नहीं टूटता। यही पैटर्न डार्क मोड को छोटी टीम से आगे स्केल करने लायक बनाता है।
क्या डार्क मोड एक्सेसिबिलिटी सुधारता है?
रोशनी के प्रति संवेदनशीलता, माइग्रेन या फोटोफोबिया वाले यूज़र के लिए, हाँ। जिन यूज़र को हाई-कंट्रास्ट टेक्स्ट या खास रंग धारणा चाहिए, उनके लिए ज़रूरी नहीं। डार्क मोड एक एक्सेसिबिलिटी विकल्प है, अपने आप मिलने वाली एक्सेसिबिलिटी जीत नहीं। सही लागू की गई डार्क थीम लाइट थीम जितनी सख़्ती से WCAG कंट्रास्ट नियम पूरे करती है, और खराब लागू की गई थीम उनमें फेल होती है।
डार्क मोड एक सिस्टम फ़ैसला है, टॉगल नहीं
एक थीम और टूटी दूसरी थीम वाला प्रोडक्ट, एक साफ़ थीम वाले प्रोडक्ट से बुरा है। डार्क मोड या तो लाइट थीम के समानांतर पूरी तरह डिज़ाइन, पूरी तरह टेस्ट और पूरी तरह टोकनाइज़ होकर शिप होता है, या शिप ही नहीं होता।
पहले टोकन परत बनाएँ। दूसरे नंबर पर कंट्रास्ट गणित चलाएँ। डार्क थीम को हर एलिवेशन, हर कंपोनेंट, हर इमेज कंटेनर के सामने डिज़ाइन करें। असली डिवाइस पर कम ब्राइटनेस में टेस्ट करें। दोनों थीम साथ शिप करें या कोई नहीं।
अगर आपको ब्रांड, वेब और UI का ऐसा काम चाहिए जो डार्क मोड को प्रेफ़रेंस टॉगल की जगह सिस्टम-स्तर की प्रतिबद्धता मानता हो, तो Brainy को हायर करें। दो थीम, एक प्रोडक्ट, एक सुसंगत डिज़ाइन फ़ैसला।
संबंधित पढ़ाई
- डिज़ाइन सिस्टम गाइड
- एक्सेसिबल कलर कंट्रास्ट
- वेब एक्सेसिबिलिटी चेकलिस्ट
- डिज़ाइनरों के लिए कलर थ्योरी
- विज़ुअल हायरार्की डिज़ाइन
Want a product that ships dark mode as a system decision instead of a last-minute toggle? Brainy builds brand, web, and UI with both themes wired into the tokens from day one.
Get Started
