डार्क मोड कलर सिस्टम: रात 2 बजे भी काम करने वाला पैलेट कैसे बनाएं
डार्क मोड कलर सिस्टम की एक व्यावहारिक गाइड। सरफेस एलिवेशन मॉडल, डीसैचुरेशन नियम, एक्सेंट कैलिब्रेशन, और 2026 में सबसे साफ़ डार्क मोड पैलेट शिप करने वाले सात ब्रांड।
डार्क मोड कलर सिस्टम: रात 2 बजे भी काम करने वाला पैलेट कैसे बनाएं
डार्क मोड एक पैरेलल सिस्टम है, और जो प्रोडक्ट लाइट पर बस एक स्विच पलट देते हैं, वही बत्ती बुझते ही टूटे हुए दिखते हैं।
पूरा लेख एक वाक्य में यही है। ज़्यादातर डार्क मोड के फेल होने की वजह इससे ज़्यादा ठोस है: डिज़ाइनर "लाइट पैलेट को उलट दो" वाला रास्ता पकड़ते हैं और नतीजे में या तो ग्रे-ऑन-ग्रे का सपाट मैदान मिलता है या ऐसा इलेक्ट्रिक कोरल जो रेटिना झुलसा दे। इसका हल कॉस्मेटिक नहीं, आर्किटेक्चरल है। अपने एलिवेशन मॉडल, अपने डीसैचुरेशन नियम और अपने एक्सेंट कैलिब्रेशन के साथ एक पैरेलल सिस्टम बनाइए, और नतीजा सोचा-समझा दिखेगा क्योंकि वह सोचा-समझा होता है।
डार्क मोड एक पैरेलल सिस्टम है, इनवर्ज़न नहीं
आपके लाइट पैलेट में बैकग्राउंड, सरफेस, बॉर्डर, टेक्स्ट और एक्सेंट टोकन हैं। आपके डार्क पैलेट को भी यही सारे टोकन चाहिए, और उनकी वैल्यू लाइट वैल्यू का उल्टा नहीं होती। कम लाइटनेस पर क्रोमा अलग बर्ताव करता है। ह्यू शिफ्ट परसेप्चुअल सीमा पर होते हैं। लाइट मोड में L 0.62 पर जो साफ़ कोरल दिखता है, वही डार्क मोड में लगभग काली सरफेस के सामने L 0.72 पर थरथराते नियॉन में खिल जाता है।
जो टीमें साफ़ डार्क मोड शिप करती हैं, वे किसी टॉगल को हाथ नहीं लगातीं। वे दूसरा पैलेट डिज़ाइन करती हैं, उसे उसी सिमैंटिक टोकन लेयर से मैप करती हैं, और थीम रूट पर मोड स्विच के ज़रिए दोनों को जोड़ती हैं। यह ज़्यादा मेहनत है। और यही अकेला तरीका है जो आपको शर्मिंदा नहीं करता।
सरफेस एलिवेशन मॉडल
बैकग्राउंड। सरफेस। सरफेस-एलिवेटेड। सरफेस-ओवरले। हर काम करने वाले डार्क मोड डिज़ाइन UI में ये चार टियर होते हैं, और तीसरा टियर छोड़ देना डार्क UI के सपाट लगने की सबसे आम वजह है।
लाइट मोड में एलिवेशन साफ़ दिखता है: सफ़ेद कार्ड ग्रे बैकग्राउंड पर बैठते हैं, शैडो सस्ते हैं, और गहराई मुफ़्त है। डार्क मोड में शैडो गहरी सरफेस के सामने गायब हो जाते हैं। एलिवेशन को सरफेस की लाइटनेस में ही रहना पड़ता है। हर टियर लाइटनेस में एक छोटा, सोचा-समझा कदम ऊपर होता है, छलांग नहीं।
ये चार टियर सौंदर्य की पसंद नहीं हैं। ये भार उठाने वाला ढांचा हैं। आपके सिस्टम का हर कंपोनेंट इन्हीं टियर में से किसी एक पर बैठता है, और हर टेक्स्ट-ओवर-सरफेस जोड़ी की पठनीयता इस पर निर्भर करती है कि आपने उसे स्टैक में कहां रखा।
बैकग्राउंड फ़र्श तय करता है
बैकग्राउंड सबसे गहरा टियर है। नियम: पूरी सैचुरेशन पर कभी शुद्ध काला (oklch(0 0 0)) मत इस्तेमाल कीजिए। लगभग 8 से 10 प्रतिशत लाइटनेस वाला हल्का टिंट किया हुआ नियर-ब्लैक लीजिए। टिंट लगभग हमेशा वॉर्म होता है, क्योंकि ठंडे काले रंग प्रोडक्ट की हैसियत से ज़्यादा सस्ते और ठंडे लगते हैं।
oklch(0.10 0.012 30) जैसी वैल्यू आपको गहरा वॉर्म चारकोल देती है जो किसी भी डिस्प्ले पर "काला" पढ़ा जाता है, पर शुद्ध काले की मृत निर्वात वाली फ़ीलिंग से बचा लेता है। 0.012 क्रोमा और 30 डिग्री का ह्यू एंगल (हल्का वॉर्म झुकाव) काफ़ी है। इससे ज़्यादा हुआ तो मटमैला लगता है। कम हुआ तो बेजान।
सरफेस कंटेंट को थामती है
सरफेस वह टियर है जहां ज़्यादातर कंटेंट बैठता है, बैकग्राउंड से थोड़ा ऊपर उठा हुआ। बैकग्राउंड से सरफेस तक लाइटनेस का कदम आमतौर पर OKLCH में 3 से 5 पॉइंट होता है। यह अंतर पहला संकेत है जो आँख पढ़ती है: कंटेंट यहां रहता है, बैकग्राउंड उसके पीछे है।
oklch(0.14 0.010 30) को oklch(0.10 0.012 30) के सामने रखें तो बिना बॉर्डर या शैडो के पर्याप्त दृश्य अलगाव मिलता है। क्रोमा थोड़ा गिरता है क्योंकि डार्क सरफेस में जैसे-जैसे लाइटनेस बढ़ती है, क्रोमा को पीछे खींचना पड़ता है ताकि बैकग्राउंड में मटमैला रिसाव न हो। रेंडर के वक्त यह बारीक है, और छोड़ देने पर पूरी तरह गलत।
सरफेस-एलिवेटेड और सरफेस-ओवरले
एलिवेटेड सरफेस कार्ड और पैनल थामती हैं। ओवरले सरफेस मोडल और शीट थामती हैं। लाइटनेस की प्रगति जारी रहती है: सरफेस-एलिवेटेड लगभग oklch(0.18 0.008 30) पर, सरफेस-ओवरले oklch(0.22 0.007 30) पर। हर कदम के साथ क्रोमा गिरता है क्योंकि स्टैक में ऊपर होने का मतलब देखने वाले के करीब होना है, और उन सरफेस को साफ़ महसूस होना चाहिए।
ज़्यादातर डार्क UI के सपाट ग्रे दलिया में ढहने की वजह यह है कि डिज़ाइनर दो टियर इस्तेमाल करते हैं: बैकग्राउंड और सरफेस। कार्ड बैकग्राउंड पर रहते हैं, टेक्स्ट सरफेस पर रहता है, और सब कुछ एक ही गहराई पर पढ़ा जाता है। तीसरा और चौथा टियर जोड़ दीजिए और UI को बिना एक भी ड्रॉप शैडो के तुरंत पठनीयता मिल जाती है।
डीसैचुरेशन नियम
जो सैचुरेटेड रंग लाइट में चलते हैं, वे रात में जलते हैं। नियम: एक्सेंट को 15 से 25 प्रतिशत डीसैचुरेट कीजिए और टेक्स्ट व बॉर्डर पर क्रोमा और भी घटाइए। यह ब्रांड को फीका करने की बात नहीं है। यह इस बारे में है कि कम परिवेशी रोशनी में आँख क्रोमा को कैसे प्रोसेस करती है।
तेज़ परिवेशी रोशनी में (दोपहर का ऑफ़िस) चटक क्रोमा जीवंत पढ़ा जाता है। कम परिवेशी रोशनी में (आधी रात की डेस्क) वही क्रोमा आक्रामक, हेलो करने वाला और शारीरिक रूप से असहज पढ़ा जाता है। हल यह नहीं कि रंग से डरें। हल उसे कैलिब्रेट करना है। ब्रांड पहचाना जाता रहता है। प्रोडक्ट चुभना बंद कर देता है।
शुद्ध सफ़ेद टेक्स्ट गलत क्यों है
नियर-ब्लैक पर शुद्ध सफ़ेद हाई कंट्रास्ट नहीं है, यह ज़रूरत से ज़्यादा कंट्रास्ट है। हेलो इफ़ेक्ट, जहां चमकीला टेक्स्ट अंधेरे आसपास में रिसता दिखता है, एक दर्ज की गई ऑप्टिकल घटना है जो डार्क UI को पढ़ना आसान नहीं, मुश्किल बनाती है।
डार्क मोड में प्राइमरी टेक्स्ट की सही वैल्यू लगभग 90 से 95 प्रतिशत लाइटनेस है, हल्के वॉर्म टिंट के साथ। oklch(0.93 0.005 60) "सफ़ेद" पढ़ा जाता है पर हेलो नहीं करता। सेकेंडरी टेक्स्ट oklch(0.70 0.010 60) पर आ जाता है, बॉडी साइज़ पर अब भी पढ़ने लायक, प्राइमरी के मुकाबले दृश्य रूप से पीछे हटता हुआ। ऑफ़-व्हाइट वही वैल्यू है जिसे डिज़ाइनर सबसे ज़्यादा गलत करते हैं, क्योंकि यह समझौते जैसी लगती है और असल में यही सही वैल्यू है।
एक्सेंट कैलिब्रेशन ब्रांड को पहचानने लायक रखता है
ब्रांड एक्सेंट को पहचान खोए बिना डार्क मोड में पढ़ा जाना होता है। कैलिब्रेशन है लाइटनेस उठाना और क्रोमा गिराना, ह्यू बदलना नहीं। अगर लाइट-मोड एक्सेंट oklch(0.62 0.22 25) है, तो डार्क-मोड एक्सेंट oklch(0.72 0.17 25) है। वही ह्यू। ऊंची लाइटनेस ताकि वह डार्क सरफेस पर उभरे। नीचा क्रोमा ताकि वह हेलो न करे।
गलती यह है कि डार्क मोड को ऐसी जगह मान लिया जाए जहां एक्सेंट को मंद कर दिया जाता है। मंद करना ब्रांड की पहचान मार देता है। लाइटनेस उठाना और क्रोमा गिराना ब्रांड कलर पैलेट की फ़ील बचाए रखता है और दृश्य जलन रोकता है। यूज़र को यह समायोजन नहीं दिखता। उसे बस इतना दिखता है कि प्रोडक्ट अच्छा लग रहा है।
वह कंट्रास्ट पास जो WCAG से छूट जाता है
WCAG 2.1 के कंट्रास्ट रेशियो बहुत सारे बदसूरत डार्क UI को पास कर देते हैं। गहरी सरफेस और मंद ग्रे टेक्स्ट के बीच 4.5:1 का अनुपात WCAG पास कर सकता है, जबकि परिवेशी हालात में पढ़ना सच में मुश्किल हो। दूसरा पास APCA है, जो लाइटनेस परसेप्शन को ज़्यादा सटीक मॉडल करता है, खासकर अंधेरे पर रोशनी के फ़र्क में।
APCA के बाद आँख वाला टेस्ट चलाइए। शिमर वह कंपन है जो आपको तब दिखता है जब समान लाइटनेस पर पर अलग क्रोमा वाले दो रंग साथ बैठते हैं। हेलो चमकीले तत्वों का अंधेरे आसपास में रिसाव है। ब्लूम सैचुरेटेड एक्सेंट पर महसूस होने वाली चमक है। इनमें से कुछ भी मौजूद हो तो जोड़ी फेल है, अनुपात चाहे जो हो। वैल्यू ठीक कीजिए, अनुपात नहीं। एक्सेसिबल कलर कंट्रास्ट की बारीकियों पर गहरे पास के लिए, पूरी कार्यप्रणाली उन एज केस को कवर करती है जो लाइट-मोड ऑडिटिंग में सामने नहीं आते।
साफ़ डार्क पैलेट शिप करने वाले सात ब्रांड
Linear, Notion, Vercel, Stripe, GitHub, Arc और Raycast हर एक डार्क मोड को अलग तरह से सुलझाते हैं। जो पैटर्न वे साझा करते हैं, वही चुराने लायक हैं।
| ब्रांड | सरफेस मॉडल | एक्सेंट रणनीति | वे क्या सही करते हैं |
|---|---|---|---|
| Linear | असली चार-टियर, कसे हुए कदम | पर्पल ऊपर उठाया, क्रोमा ~0.15 | कदम इतने कसे कि गहराई सहज लगती है |
| Notion | ओवरले के साथ तीन-टियर | डार्क में एक्सेंट का न्यूनतम इस्तेमाल | लगभग शून्य क्रोमा, सारी गहराई |
| Vercel | बाइनरी (बैकग्राउंड + एलिवेटेड) | सिर्फ़ सफ़ेद | बेरहमी से सरल; इसलिए चलता है क्योंकि पूरा कमिट करता है |
| Stripe | चार-टियर, वॉर्म टिंट | ब्लू कैलिब्रेट किया, घटाया नहीं | घना डेटा हर टियर पर साफ़ पढ़ा जाता है |
| GitHub | तीन नामित थीम (dark, dimmed, high-contrast) | ब्लू-ग्रीन, डीसैचुरेटेड | "Dimmed" सही डिफ़ॉल्ट है |
| Arc | हर स्पेस के लिए कस्टम टिंटिंग | पूरी तरह यूज़र-परिभाषित ह्यू | एलिवेशन ह्यू शिफ्ट से, लाइटनेस से नहीं |
| Raycast | भारी ब्लर के साथ दो-टियर | ऑरेंज एक्सेंट, आक्रामक रूप से ऊपर उठाया | ब्लर निहित एलिवेशन बनाता है |
Linear रेफ़रेंस इम्प्लीमेंटेशन है। सरफेस के कदम इतने संकरे हैं कि UI असली गहराई वाले एक इकलौते डार्क फ़ील्ड की तरह पढ़ा जाता है। पर्पल एक्सेंट बिना जले Linear के पर्पल के रूप में पहचाना जाता है। टाइपोग्राफ़िक हायरार्की सिर्फ़ साइज़ पर नहीं, टेक्स्ट टोकन में लाइटनेस के कदमों पर टिकी है।
Vercel साबित करता है कि बाइनरी मॉडल चल सकता है अगर आप पूरी तरह कमिट करें। कोई तीसरी सरफेस नहीं। कोई ग्रे स्टेट नहीं। सब कुछ या तो गहरा बैकग्राउंड है या थोड़ी उठी हुई सरफेस, और मोनोक्रोम का यह कमिटमेंट इसे सीमा नहीं, डिज़ाइन का फ़ैसला बना देता है। ज़्यादातर टीमें यह कर नहीं सकतीं क्योंकि उनके पास स्टेटस रंग, इलस्ट्रेशन और ब्रांड मोमेंट हैं जिन्हें एलिवेशन चाहिए।
GitHub का "Dimmed" विकल्प सही समझ है जो गलत दायरे में लगाई गई। उन्होंने इसे थीम वेरिएंट के रूप में बनाया, पर असली सबक यह है कि लंबे समय तक पढ़ने के लिए वॉर्म-टिंटेड डार्क सरफेस ठंडे डिफ़ॉल्ट से ज़्यादा आरामदेह है। हर डार्क मोड को डिफ़ॉल्ट रूप से वॉर्म चलना चाहिए।
ऐसा डार्क मोड चाहिए जो रात 2 बजे सोचा-समझा लगे, दोपहर में उलटाया हुआ नहीं? Brainy एलिवेशन मॉडल, एक्सेंट कैलिब्रेशन और OKLCH टोकन मैप के साथ पैरेलल डार्क कलर सिस्टम डिज़ाइन करता है, जो सीधे Figma और CSS में डालने के लिए तैयार होते हैं। Brainy को हायर करें।
काम करने वाला डार्क मोड टोकन मैप
नीचे का टोकन मैप एक असली डार्क मोड OKLCH कलर निर्देशांकों में शिप करता है। प्रिमिटिव कच्ची वैल्यू हैं। सिमैंटिक भूमिकाएं हैं। प्रिमिटिव को कच्ची वैल्यू के रूप में Figma वेरिएबल कलेक्शन में डालिए। सिमैंटिक को प्रिमिटिव से एलियास के रूप में मैप कीजिए। यह दो-लेयर आर्किटेक्चर ही पूरा टोकन सिस्टम है।
| टोकन | भूमिका | OKLCH वैल्यू | हेक्स अनुमानित |
|---|---|---|---|
--color-bg | बैकग्राउंड का फ़र्श | oklch(0.10 0.012 30) | #191512 |
--color-surface | डिफ़ॉल्ट कंटेंट सरफेस | oklch(0.14 0.010 30) | #221e1a |
--color-surface-elevated | कार्ड, पैनल | oklch(0.18 0.008 30) | #2c2723 |
--color-surface-overlay | मोडल, मेन्यू, शीट | oklch(0.22 0.007 30) | #35302c |
--color-text-primary | बॉडी कॉपी, हेडिंग | oklch(0.93 0.005 60) | #edeae5 |
--color-text-secondary | कैप्शन, लेबल, मेटा | oklch(0.70 0.010 60) | #b0a89e |
--color-text-disabled | डिसेबल्ड स्टेट | oklch(0.45 0.005 60) | #6e6860 |
--color-border-subtle | डिवाइडर, हेयरलाइन | oklch(0.22 0.008 30) | #36302b |
--color-border-default | इनपुट बॉर्डर, कार्ड बॉर्डर | oklch(0.28 0.010 30) | #433d37 |
--color-accent | प्राइमरी CTA, एक्टिव स्टेट | oklch(0.72 0.17 25) | #e0816a |
--color-accent-muted | होवर, सेकेंडरी एक्सेंट | oklch(0.65 0.12 25) | #c27060 |
--color-accent-subtle | एक्सेंट तत्वों के पीछे टिंटेड बैकग्राउंड | oklch(0.16 0.04 25) | #2a1e1a |
ह्यू पूरे समय 25 से 30 डिग्री पर चलता है (वॉर्म कोरल का इलाका)। सिस्टम इसलिए जुड़ा रहता है क्योंकि फ़र्श से छत तक तापमान एक जैसा है। ह्यू को 250 डिग्री कर दें तो आपको Linear जैसा पैलेट मिलता है। 200 डिग्री कर दें तो Vercel के करीब का पैलेट मिलता है। ढांचा नहीं बदलता। सिर्फ़ ह्यू बदलता है।
इम्प्लीमेंटेशन के लिए, पूरी तालिका :root[data-theme="dark"] पर CSS कस्टम प्रॉपर्टी से मैप होती है। Figma में हर पंक्ति "Dark" मोड कलेक्शन में एक वेरिएबल है। यही दो-कलेक्शन आर्किटेक्चर डिज़ाइन सिस्टम को अलग-अलग सरफेस पर स्केल करने लायक बनाता है।
मोड स्विचिंग, वह इम्प्लीमेंटेशन जो फ्लिकर नहीं करता
गलत थीम की फ़्लैश के बिना मोड बदलना तब सुलझता है जब कोई भी JavaScript चलने से पहले html एलिमेंट पर कलर स्कीम सेट कर दी जाए। कोई भी दूसरा तरीका कम से कम एक एज केस में गलत है।
पैटर्न यह है: <head> में एक ब्लॉकिंग इनलाइन <script> टैग में सेव की हुई पसंद के लिए localStorage पढ़िए। कस्टम प्रॉपर्टी का हवाला देने वाला CSS रेंडर होने से पहले, html एलिमेंट पर सिंक्रोनस रूप से data-theme="dark" या data-theme="light" लगाइए। कोई React नहीं। कोई useEffect नहीं। कोई फ़्लैश नहीं।
<script>
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = saved ?? (prefersDark ? 'dark' : 'light');
</script>
यह स्क्रिप्ट डिज़ाइन से ही ब्लॉकिंग है। यह रेंडर से पहले चलती है। अनस्टाइल्ड कंटेंट की फ़्लैश तब होती है जब थीम पहले पेंट के बाद JavaScript में लगाई जाती है, और यह एक ब्लॉकिंग स्क्रिप्ट उसे पूरी तरह खत्म कर देती है।
सिस्टम प्रेफ़रेंस, डिफ़ॉल्ट और ओवरराइड
डिफ़ॉल्ट को OS की पसंद के पीछे चलना चाहिए। यूज़र का ओवरराइड localStorage में टिकना चाहिए। टॉगल को तीन स्टेट दिखाने चाहिए: system, light और dark।
दो-स्टेट टॉगल डिज़ाइन की गलती है। जो यूज़र अपना OS डार्क पर सेट करता है और चाहता है कि ऐप उसके पीछे चले, वह दूसरा स्विच संभालना नहीं चाहता। टॉगल को एक "system" स्टेट चाहिए जो स्टोर किया ओवरराइड साफ़ कर दे और OS की पसंद को आगे चलने दे। ज़्यादातर ऐप दो स्टेट बनाते हैं और फिर हर बार जब कोई OS थीम बदलकर सोचता है कि ऐप ने फ़ॉलो क्यों नहीं किया, तो एक सपोर्ट टिकट आ जाता है।
FAQ
क्या डार्क मोड में एक्सेंट रंग इस्तेमाल करने से OLED की बैटरी लाइफ़ घटती है?
आम UI में एक्सेंट रंग छोटा सतही क्षेत्र घेरते हैं। OLED पर डार्क मोड से होने वाली बैटरी बचत लगभग पूरी तरह गहरे सरफेस क्षेत्र से आती है। डार्क बैकग्राउंड पर कोरल CTA बटन बैटरी खपत में कोई मायने रखने वाला बदलाव नहीं करता। शुद्ध काले बैकग्राउंड मायने रखते हैं। सैचुरेटेड फ़ुल-स्क्रीन इलस्ट्रेशन मायने रखते हैं। एक बटन नहीं।
क्या मैं अपने लाइट-मोड ब्रांड रंग को सीधे डार्क-मोड एक्सेंट के रूप में इस्तेमाल कर सकता हूं?
कैलिब्रेशन के बिना नहीं। अगर आपका लाइट-मोड ब्रांड रंग OKLCH में L 0.55 से 0.65 पर है, तो उसे सीधे डार्क सरफेस पर इस्तेमाल करने से वह या तो कमज़ोर पड़ेगा (उभरने के लिए बहुत मंद) या हेलो करेगा (डार्क परिवेश के सामने बहुत चटक)। लाइटनेस 8 से 12 पॉइंट उठाइए। क्रोमा 20 से 30 प्रतिशत गिराइए। ह्यू वही रखिए। यही कैलिब्रेट किया हुआ डार्क-मोड एक्सेंट है।
जिस सिस्टम में अभी डार्क मोड नहीं है, उसके लिए न्यूनतम काम करने लायक डार्क मोड क्या है?
बैकग्राउंड, सरफेस, सरफेस-एलिवेटेड, प्राइमरी टेक्स्ट, सेकेंडरी टेक्स्ट, एक्सेंट। छह टोकन। यह पूरा नहीं है, पर यह एक सिस्टम है। हर कंपोनेंट इन छह वैल्यू में से किसी एक से मैप हो सकता है, विस्तार के लिए एलिवेशन मॉडल मौजूद है, और आप इसे बिना शर्मिंदगी के शिप कर सकते हैं। वहीं से शुरू कीजिए, सौ टोकन और बिना ढांचे के साथ नहीं।
क्या ऑटो-जनरेटेड डार्क मोड कभी स्वीकार्य होता है?
प्रोटोटाइप, इंटरनल टूल और ऐसे प्रोडक्ट जिनमें एक ही सक्रिय डिज़ाइनर हो, उनके लिए सैचुरेशन समायोजन के साथ ऑटोमेटेड इनवर्ज़न शुरुआती बिंदु के रूप में स्वीकार्य है। ब्रांड मानकों और असली यूज़र वाले प्रोडक्ट के शिप किए गए डार्क मोड के रूप में, नहीं। ऑटोमेटेड डार्क मोड एक्सेंट रंगों पर फेल होते हैं, इलस्ट्रेशन पर फेल होते हैं और कंपोनेंट स्टेट पर फेल होते हैं। वे शुरुआती स्केच हैं, तैयार सिस्टम नहीं।
क्या OKLCH डार्क मोड बनाना आसान कर देता है?
काफ़ी हद तक। OKLCH की परसेप्चुअली यूनिफ़ॉर्म लाइटनेस अक्ष का मतलब है कि एलिवेशन टियर के बीच लाइटनेस के कदम सभी ह्यू में उम्मीद के मुताबिक बर्ताव करते हैं। HSL में ऑरेंज पर 5 पॉइंट का कदम ब्लू पर 5 पॉइंट के कदम से अलग दिखता है। OKLCH में नहीं दिखता। एलिवेशन मॉडल को OKLCH में बनाने का मतलब है कि एक्सेंट ह्यू कोई भी हो, कदम एक जैसे महसूस होते हैं। OKLCH कलर का पूरा पक्ष गणित को गहराई से कवर करता है।
क्या सिमैंटिक टोकन लाइट और डार्क के बीच अलग होने चाहिए, या सिर्फ़ प्रिमिटिव?
प्रिमिटिव अलग होते हैं। सिमैंटिक वही रहते हैं। --color-surface का मतलब दोनों मोड में "डिफ़ॉल्ट कंटेंट सरफेस" है। जिस प्रिमिटिव की ओर वह इशारा करता है, वह डार्क मोड में अलग है। यही दो-लेयर आर्किटेक्चर का मकसद है। कंपोनेंट सिमैंटिक का हवाला देते हैं। सिमैंटिक प्रिमिटिव का हवाला देते हैं। मोड स्विच प्रिमिटिव को दोबारा असाइन करता है। कंपोनेंट अपने आप और सही तरीके से अपडेट हो जाते हैं।
वह बदलाव जो डार्क मोड सिस्टम असल में खोलते हैं
एक असली डार्क मोड एक पैरेलल डिज़ाइन सरफेस है। बाद में सूझी बात नहीं। सेटिंग्स का टॉगल नहीं। अपने ढांचे, अपनी सीमाओं और अपने शिल्प-फ़ैसलों वाली दूसरी सरफेस। जो टीमें इसे इसी तरह लेती हैं, वे ऐसे प्रोडक्ट शिप करती हैं जो रात 2 बजे सोचे-समझे लगते हैं। जो टीमें स्विच पलट देती हैं, वे ऐसे प्रोडक्ट शिप करती हैं जो ऐसे लगते हैं जैसे किसी ने खत्म करना भुला दिया हो।
एलिवेशन मॉडल नींव है। डीसैचुरेशन नियम और एक्सेंट कैलिब्रेशन शिल्प की परत हैं। OKLCH टोकन मैप इम्प्लीमेंटेशन है। बिना फ्लिकर वाली मोड स्विचिंग के साथ तीन-स्टेट टॉगल शिपिंग की शर्त है। हर हिस्सा जुड़ा है। अगर आप चाहते हैं कि नतीजा अच्छा हो तो इनमें से कुछ भी वैकल्पिक नहीं है।
पैरेलल सिस्टम बनाइए। मैप शिप कीजिए। फ़र्क दिखता है।
ऐसा डार्क मोड चाहिए जो रात 2 बजे सोचा-समझा लगे, दोपहर में उलटाया हुआ नहीं? Brainy एलिवेशन मॉडल, एक्सेंट कैलिब्रेशन और OKLCH टोकन मैप के साथ पैरेलल डार्क कलर सिस्टम डिज़ाइन करता है, जो सीधे Figma और CSS में डालने के लिए तैयार होते हैं। Brainy को हायर करें।
अब इसे drafts/dark-mode-color-systems.md में सेव कर रहा हूं।
Want a dark mode that looks intentional at 2 a.m. instead of inverted at noon? Brainy designs parallel dark color systems with the elevation model, accent calibration, and the OKLCH token map ready to drop into Figma and CSS.
Get Started
