डार्क मोड के छह स्तर (2024)

• ब्राउज़र की बुनियादी सुविधाओं से लेकर JavaScript media queries तक, डार्क मोड इम्प्लीमेंटेशन के दायरे को धीरे-धीरे बढ़ाने वाले 8 स्तरों के विभाजन का सार
• सबसे सरल तरीका <meta name="color-scheme" content="light dark"> या color-scheme: light dark घोषित करके यूज़र की color scheme preference का पालन करना है
• ऊँचे स्तरों पर light-dark() फ़ंक्शन, @media (prefers-color-scheme: dark), और scheme-विशिष्ट अलग stylesheet के ज़रिए सिर्फ रंग ही नहीं बल्कि images और shadows तक का व्यापक समायोजन संभव है
• सिर्फ यूज़र की system setting का पालन करने के बजाय Automatic·light·dark तीन विकल्प देने वाला switcher बनाया जा सकता है, और :has() तथा वास्तविक meta element के आधार पर theme पहचाना जा सकता है
• Safari की accessibility सीमाएँ और print के समय prefers-color-scheme के व्यवहार के अवलोकन भी शामिल हैं, जिससे पता चलता है कि हाल की CSS सुविधाओं से light/dark mode को बिल्ट-इन बनाना काफी आसान हो गया है

---

डार्क मोड का स्तर-दर-स्तर इम्प्लीमेंटेशन

• Level 1: Barebone

  • बिना एक भी CSS लाइन के light/dark भेद सक्रिय किया जा सकता है, और document head में <meta name="color-scheme" content="light dark"> जोड़ते ही ब्राउज़र यूज़र की color scheme preference का पालन करने लगता है
  • content attribute में आइटम्स का क्रम सैद्धांतिक रूप से मायने रखता है, और जिन यूज़र्स ने color scheme preference निर्धारित नहीं की है उन्हें space से अलग की गई सूची का पहला मान मिलता है
  • मौजूदा operating system settings में color scheme न चुनने का विकल्प नहीं है, इसलिए व्यवहार में अंततः वही scheme लागू होती है जो operating system setting से मेल खाती है
  • content में केवल एक मान भी दिया जा सकता है; इस स्थिति में यूज़र preference को ध्यान में रखे बिना वही scheme force की जाती है
  • यह meta tag कुछ हद तक अगले स्तर वाले CSS तरीके के HTML-पक्षीय समकक्ष की भूमिका निभाता है

• Level 2: Basic

  • CSS में html { color-scheme: light dark; } घोषित करके light/dark mode भेद लागू किया जा सकता है
  • अगर DOM में पहले से meta tag मौजूद है तो यह declaration ज़रूरी नहीं है, और यदि आप HTML नियंत्रित कर सकते हैं तो meta tag का उपयोग सुझाया जाता है ताकि ब्राउज़र CSS parse होने से पहले ही निर्देश जान सके
  • दोनों तरीके user agent default styles और उनमें शामिल light/dark mode का लाभ लेने देते हैं
  • इसके ऊपर CSS जोड़ते समय अगर ज़ोर CSS system colors के उपयोग पर रखा जाए तो काफ़ी सुसंगत डिज़ाइन बनाया जा सकता है
  • जहाँ meta tag हमेशा पूरे document पर लागू होता है, वहीं CSS color-scheme declaration root element के अलावा दूसरी जगहों पर भी सेट की जा सकती है; इस अंतर से अतिरिक्त उपयोग की गुंजाइश बनती है

• Level 3: Benign

  • अपेक्षाकृत हाल में जोड़ा गया CSS का light-dark() color function सरल light/dark mode समायोजन के लिए इस्तेमाल किया जा सकता है
  • उदाहरण में background-color: light-dark(black, white); और color: light-dark(white, black); की तरह उपयोग किया गया है; पहला argument light mode पर और दूसरा argument dark mode पर लागू होता है
  • arguments में सीधे वास्तविक colors दिए जा सकते हैं, या ऐसी custom properties जो color के रूप में व्याख्यायित हों
  • इस पूरे लेख में लिखे जाने के समय के अनुसार केवल इसी स्तर के लिए browser support पर्याप्त नहीं है

• Level 4: Bold

  • पारंपरिक @media (prefers-color-scheme: dark) media query से डार्क मोड स्विचिंग लागू की जा सकती है
  • चाहे light क्वेरी करें या dark, केवल रंग बदलने तक सीमित न रहकर अधिकतम स्तर का customization संभव है
  • डार्क मोड में images को filter के ज़रिए कम संतृप्त करना, या box shadow को outline से बदलना जैसी adjustments भी संभव हैं

• Level 5: Bisectional

  • media queries को HTML में भी इस्तेमाल किया जा सकता है, और link element के media attribute में रखकर scheme-विशिष्ट stylesheet अलग की जा सकती है
  • उदाहरण के तौर पर light.css और dark.css को क्रमशः prefers-color-scheme: light और prefers-color-scheme: dark से जोड़ने का तरीका दिया गया है
  • जब customization का दायरा बड़ा हो तो dedicated file संरचना उपयुक्त होती है, और ब्राउज़र क्वेरी से मेल न खाने वाली CSS files को अनदेखा कर सकता है, जिससे डाउनलोड की जाने वाली फ़ाइलें एक कम हो सकती हैं

• Level 6: Ballistic

  • JavaScript में window.matchMedia('(prefers-color-scheme:dark)') के ज़रिए color scheme media query का उपयोग किया जा सकता है
  • अन्य media queries की तरह यह पूछा जा सकता है कि light या dark scheme लागू है या नहीं, और परिणाम के आधार पर इच्छित प्रोसेसिंग की जा सकती है
  • वास्तविक इम्प्लीमेंटेशन में पहले के स्तरों की तकनीकों में से केवल एक पर अड़े रहने के बजाय मिश्रित उपयोग किया जा सकता है

यूज़र switcher और उन्नत पैटर्न

• Level 7: Beyond

  • केवल यूज़र की system preference पर निर्भर रहने की ज़रूरत नहीं है; color scheme switcher बनाया जा सकता है
  • यह switcher साधारण boolean नहीं होता, क्योंकि शुरुआती default के रूप में prefers-color-scheme का पालन करने वाला Automatic mode चाहिए
  • इसके ऊपर switcher जोड़ने पर यूज़र Automatic, light, dark इन तीन modes में से एक चुन सकता है

• Level 8: Beguiling

  • Level 7 switcher को लागू करते समय आम तौर पर HTML element पर .dark class या data-theme="dark" जैसी attribute जोड़ने का तरीका इस्तेमाल होता है
  • इसके बजाय :has() का उपयोग करके वास्तविक <meta name="color-scheme" content="dark"> की मौजूदगी को सीधे query किया जा सकता है
  • उदाहरण में html:has(meta[name="color-scheme"][content="dark"]) selector के अंतर्गत --color-bg, --color-text जैसी CSS variables को डार्क मोड वाले मानों पर सेट किया गया है
  • अलग class या data attribute के बिना भी वास्तविक meta element के आधार पर theme पहचानी जा सकती है

अतिरिक्त चर्चा और अवलोकन

• CSS Naked Day अवलोकन

  • styles हटाने के बाद देखी गई लगभग हर साइट पर डार्क मोड की अनुपस्थिति साफ़ दिखी, और इसी से डार्क मोड स्तरों का यह विभाजन बना
  • जब नई साइट शुरू से बनाई जाती है और नए styles लिखे जाते हैं, तो हाल की CSS सुविधाओं के साथ light/dark mode बिल्ट-इन करना बहुत आसान हो गया है

• Safari accessibility issue

  • यह उल्लेख है कि अपेक्षाकृत हाल तक Safari डार्क मोड में accessible link colors उपलब्ध नहीं कराता था
  • पिछले CSS Naked Day में यह समस्या मिलने पर meta tag हटाकर केवल light color scheme इस्तेमाल करने का अनुभव भी बताया गया है
  • बाद में meta tag फिर जोड़ा गया, लेकिन यह समझ बनी रही कि पुराने Safari यूज़र्स के लिए accessibility में गिरावट हो सकती है
  • Safari के डार्क मोड में text boxes पर दिखाई देने वाली border की कमी भी देखी गई
  • केवल user agent styles पर निर्भर रहने से, सही semantic HTML का उपयोग करने पर भी पूरी accessibility सुनिश्चित नहीं होती; इसलिए आगे के CSS Naked Day में भी पर्याप्त styling बनाए रखने पर विचार किया गया है

• Print और screen and शर्त

  • Bisectional उदाहरण में screen and ... उपयोग करने का कारण printer target को बाहर रखना बताया गया है
  • यह मानते हुए कि theme-independent core stylesheet या dedicated print stylesheet अलग मौजूद है, यह निर्णय सुरक्षित अलगाव के लिए लिया गया क्योंकि printer पर डार्क मोड अधिक ink खर्च कर सकता है
  • वास्तविक परीक्षण में system dark mode चालू रहते हुए print करने पर भी केवल काला text और सफ़ेद कागज़ ही निकला, और यह देखा गया कि ब्राउज़र print पर उन डार्क मोड styles को लागू नहीं करते
  • अतिरिक्त परीक्षण में print preview के दौरान prefers-color-scheme हमेशा light रिपोर्ट हुआ; यह Firefox और Chromium में देखा गया
  • अगर किसी के पास काले कागज़ और सफ़ेद स्याही वाला printer हो, तो यह अफ़सोस की बात होगी — ऐसा हल्का मज़ाक भी शामिल है

[GN⁺]

Hacker News की राय

• अगर बहुत ज़्यादा customization करना है तो अलग file ठीक लगती है, लेकिन यह कहना कि media query से मेल न खाने वाला CSS डाउनलोड भी नहीं होता, मुझे असली browser behavior से अलग लगता है। मेरे अनुभव में browser आखिरकार सब कुछ डाउनलोड करता है, बस priority अलग देता है
• मैं सोच रहा था कि server से शुरुआती content का इंतज़ार करते समय होने वाली flashbang जैसी चमक को रोकने का अभी तक कोई तरीका नहीं है क्या
  • मुझे Firefox के userContent.css में background-color सेट करने वाला तरीका ठीक लगता है
  • मैं तो बस screen brightness कम करके dark mode बंद कर देता हूँ, तो flashbang नहीं होता। ऊपर से battery भी ज़्यादा चलती है
• मुझे लगा था यह लेख dark mode background में काले रंग की गहराई की पसंद पर होगा। यह भी सुना है कि pure black OLED पर battery efficiency के लिए बेहतर होता है, और मैं ऐसे लोगों को भी जानता हूँ जिन्हें पूरी तरह काले की बजाय थोड़ा grey पसंद है। लेकिन इसके लिए सचमुच छह स्तर चाहिए या नहीं, इस पर मुझे शक है; महसूस होने लायक फर्क तो ज़्यादा से ज़्यादा 3~4 स्तरों में ही लगता है
  • मुझे लगता है ज़्यादा सामान्य हल Reader Mode compatibility का standardization है। हर site द्वारा हर user की पसंद अलग-अलग संभालने वाली n x m समस्या की जगह, site सिर्फ एक simple content view support करे और browser उसके ऊपर per-user settings संभाले, यह ढाँचा बेहतर लगता है
  • OLED पर मैं pure black को पसंद करता हूँ। मुझे लगता है जितने कम pixel जलें, burn-in का दबाव उतना कम होगा, और वैसे भी इसकी उम्र सीमित है, इसलिए लंबे समय में मैं monitor को 2~3 साल की बजाय 5 साल से ज़्यादा चलाना चाहूँगा
• मेरे हिसाब से सबसे ऊँचा level 9 है, या फिर 0, यानी बस computer बंद करके जाकर सो जाना
• मुझे अच्छा लगा कि OP ने 3-state toggle सही तरह से implement किया
• मुझे लगता है अगर नीचे scroll करते समय स्तर dynamically apply होते तो और मज़ेदार होता
  • या फिर page पर सही जगहों पर reader खुद level selection कर सके, यह भी ठीक रहता
• मेरे हिसाब से यह 8 स्तर नहीं हैं क्या
• बिल्कुल 2024 जैसा लगा
• इस स्थिति में सबसे पहले xkcd 3227 ही याद आया