गहरे रंग वाले मोड के टॉगल

गहरे रंग वाले मोड के टॉगल की मदद से, उपयोगकर्ता किसी साइट के लिए सिस्टम की कलर स्कीम को बदल सकते हैं. <meta name="color-scheme"> को अपडेट करके, ओवरराइड लागू किया जाता है: light dark का मतलब है "सिस्टम की सेटिंग का पालन करें", light या dark किसी खास स्कीम को पिन करें. रंग (light-dark()), सिस्टम के रंग, और नेटिव यूज़र इंटरफ़ेस (यूआई), सभी सीएसएस color-scheme प्रॉपर्टी से तय होते हैं. इसलिए, टॉगल उस प्रॉपर्टी को <meta> के साथ सिंक करके काम करता है. इसके बारे में ज़्यादा जानने के लिए, सीएसएस में ओवरराइड को दिखाना देखें.

क्या आपको हमेशा दिखने वाला टॉगल, सेटिंग कंट्रोल या कोई टॉगल नहीं चाहिए?

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

ओएस के लिए किसी स्कीम को पिन करना एक मान्य, लेकिन कम इस्तेमाल होने वाला इंटेंट है. कम इस्तेमाल होने वाले इंटेंट, प्रोग्रेसिव डिसक्लोज़र के पीछे होते हैं, न कि ऐसे कंट्रोल में जो हर समय दिखता है.

परसिस्टेंट टॉगल, ज़्यादातर डेवलपर या डेवलपर से जुड़ी साइटों (जैसे, डिज़ाइनर के लिए) पर मिलते हैं. इन साइटों पर, स्कीम स्विच करना आम इंटरनेट उपयोगकर्ता की तुलना में ज़्यादा बार किया जाने वाला काम है. सिर्फ़ इसलिए कोई बटन न जोड़ें, क्योंकि डेवलपर साइटों पर ऐसा करना आम बात है: इस कंट्रोल में डेवलपर की दिलचस्पी, आम उपयोगकर्ताओं की दिलचस्पी से अलग होती है.

लागू करना

सबसे पहले, गहरे रंग वाले मोड में दिए गए सभी चरणों को पूरा करें, ताकि दोनों स्कीम काम कर सकें. साथ ही, सिस्टम की सेटिंग को डिफ़ॉल्ट के तौर पर सेट करें.

डेटा मॉडल

गहरे रंग वाले मोड के टॉगल के डेटा मॉडल में, आम तौर पर तीन स्थितियां शामिल होती हैं:

1. सिस्टम (कोई वैल्यू सेव नहीं की गई): यूज़र इंटरफ़ेस (यूआई), सिस्टम की कलर स्कीम के हिसाब से काम करता है. यह डिफ़ॉल्ट रूप से चालू होना चाहिए.
2. हल्के रंग वाली थीम ("light" के तौर पर सेव की गई): यूज़र इंटरफ़ेस (यूआई), हल्के रंग वाली थीम का इस्तेमाल करता है. भले ही, सिस्टम की कलर स्कीम कुछ भी हो.
3. गहरे रंग वाली थीम ("dark" के तौर पर सेव की गई): सिस्टम की कलर स्कीम चाहे जो भी हो, यूज़र इंटरफ़ेस (यूआई) गहरे रंग वाली थीम का इस्तेमाल करता है.

आम तौर पर, यह स्थिति localStorage में सेव होती है और दस्तावेज़ के हेड में <meta name="color-scheme"> एलिमेंट में दिखती है.

सीएसएस में बदलाव दिखाना

<meta> सिर्फ़ एक प्रज़ेंटेशनल हिंट है: ऑथर सीएसएस में मौजूद कोई भी color-scheme एलान इसे बदल देता है. गहरे रंग वाला मोड, :root पर color-scheme: light dark सेट करता है. इसलिए, सिर्फ़ <meta> को अपडेट करने से कोई असर नहीं पड़ता — सीएसएस लागू होता है. <meta> को वापस प्रॉपर्टी पर मैप करें, ताकि कैस्केड इसका पालन करे:

:root {
  color-scheme: light dark;

  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    color-scheme: dark;
  }
  &:has(> head > meta[name="color-scheme"][content="light"]) {
    color-scheme: light;
  }
}

color-scheme: light या color-scheme: dark को रूट डिफ़ॉल्ट के तौर पर हार्डकोड न करें. बेस डिक्लेरेशन light dark ही रहना चाहिए. सीएसएस, जेएस पर निर्भर नहीं होनी चाहिए: अगर जेएस कभी नहीं चलता है, तो <meta>, light dark ही रहता है और साइट, सिस्टम की सेटिंग का पालन करती है — कुछ भी नहीं टूटता.

पर्सिस्टेंस और FOUC से बचाव

localStorage में बदलाव को बनाए रखें; सिस्टम के डिफ़ॉल्ट पर वापस जाने पर एंट्री हटाएं.

गलत स्कीम दिखने से बचने के लिए, सेव की गई वैल्यू को इनलाइन स्क्रिप्ट में लागू करें. यह स्क्रिप्ट <meta> एलिमेंट के ठीक बाद होनी चाहिए. साथ ही, यह type=module या defer नहीं होनी चाहिए:

<meta name="color-scheme" content="light dark">
<script>
document.querySelector('meta[name="color-scheme"]').content = localStorage.getItem("color-scheme") ?? "light dark";
</script>

• यह इनलाइन स्क्रिप्ट सिर्फ़ एफ़ओयूसी को रोकने के लिए मौजूद है. इसे जितना हो सके उतना छोटा रखें. कलर स्कीम टॉगल करने के लिए, अतिरिक्त JS को बाद में लोड किया जा सकता है.
• बहुत कम मामलों में, localStorage को ऐक्सेस करने पर गड़बड़ी हो सकती है. उदाहरण के लिए, साइट का डेटा ब्लॉक हो सकता है. हालांकि, यह स्क्रिप्ट कुछ और नहीं करती, इसलिए इसका सिर्फ़ एक खराब असर हो सकता है. वह है कंसोल में गड़बड़ी दिखना. अगर यह ज़रूरी है, तो इसे try .. catch में रैप करें. पक्का करें कि पेज पर थीम अब भी लागू हो, भले ही उसे सेव न किया जा सके.
• बदलाव को किसी दूसरे टैब से बदला जा सकता है: सिंक में रहने के लिए, window के storage इवेंट को हैंडल करें.
• जब सिस्टम की सेटिंग में बदलाव करके, उसे सेव की गई वैल्यू के मुताबिक सेट किया जाता है, तो सेव की गई वैल्यू को हटाने के लिए matchMedia() का इस्तेमाल न करें. कई उपयोगकर्ताओं के ओएस, दिन के समय के आधार पर स्कीम अपने-आप बदल देते हैं. जब भी दोनों एक साथ होते हैं, तो सेव की गई वैल्यू को हटाने से किसी स्कीम को पिन करना नामुमकिन हो जाता है.

एचटीएमएल और बिना रंग वाली वैल्यू के लिए ब्रांचिंग

रंगों के लिए अलग से कुछ करने की ज़रूरत नहीं है: <meta> को color-scheme (ऊपर) से मैप करने के बाद, light-dark() ओवरराइड का पालन करता है. इस सेक्शन में, अन्य वैल्यू (जैसे, font-weight, मीडिया सोर्स वगैरह) को अडैप्ट करने के बारे में बताया गया है.

जब पेज, सिस्टम की सेटिंग के हिसाब से काम करता है, तब (prefers-color-scheme: dark) का इस्तेमाल ब्रांचिंग के लिए किया जा सकता है. इसमें <picture> या <video> सोर्स भी शामिल हैं. कलर स्कीम को बदलने से एक और समस्या आती है: सिस्टम की सेटिंग अब सोर्स ऑफ़ ट्रुथ नहीं रह जाती. साथ ही, सिर्फ़ मीडिया क्वेरी स्वीकार करने वाले एपीआई के लिए कोई डायरेक्ट विकल्प नहीं होता.

ब्रांचिंग के लिए, JS की मदद से लागू की गई क्लास, जैसे कि .dark पर पूरी तरह से भरोसा न करें. ऐसा इसलिए, क्योंकि अगर JS लोड नहीं होता है और ओएस का डिफ़ॉल्ट मोड डार्क है, तो ये क्लास गलत होंगी.

मीडिया क्वेरी को :root:has(> head > meta[name="color-scheme"][content="dark"]) (या light) सिलेक्टर के साथ जोड़ा जा सकता है, ताकि ब्रांच बनाई जा सके. इसे बेहतर तरीके से लागू करने के बारे में जानने के लिए, सिलेक्टर और @-rule के कॉम्बिनेशन देखें.

कंट्रोल के अपने विकल्प भी बिना रंग वाली ब्रांच होते हैं: मार्कअप में दोनों स्थितियों को शामिल करें (आइकॉन के साथ-साथ, विज़ुअल तौर पर छिपा हुआ ऐक्शन टेक्स्ट, जैसे कि "गहरे रंग वाली थीम पर स्विच करें") और इन सिलेक्टर के ज़रिए, इनऐक्टिव विकल्प को छिपाएं. display: none, एटी से ग़ैर-ज़रूरी विकल्प भी हटा देता है. इससे सिस्टम की सेटिंग बदलने पर, कंट्रोल को अप-टू-डेट रहने के लिए जेएस की ज़रूरत नहीं पड़ती.

इन-एचटीएमएल मीडिया के लिए, फ़िलहाल दोनों वर्शन को अलग-अलग एलिमेंट के तौर पर शामिल करना और ज़रूरत के हिसाब से विज़िबिलिटी को टॉगल करना ही एकमात्र तरीका है. display: none का इस्तेमाल करके, <source> एलिमेंट को छिपाने की सुविधा काम नहीं करती.

यूज़र इंटरफ़ेस

दो या तीन राज्य?

सभी मामलों में, यूज़र इंटरफ़ेस (यूआई) में कलर स्कीम को सिस्टम के हिसाब से सेट करने या पहले जैसा करने की सुविधा होनी चाहिए.

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

किसी अलग सेटिंग प्लैटफ़ॉर्म (पेज, पैनल या ओवरले) में कलर स्कीम कंट्रोल करना एक अलग मामला है. इसमें तीनों स्थितियों ("लाइट", "डार्क", "सिस्टम") को साफ़ तौर पर दिखाया जा सकता है: यहां उपयोगकर्ता, आने वाले समय में होने वाले व्यवहार के बारे में पहले से ही सोच-समझकर फ़ैसले ले रहा है. साथ ही, विकल्पों के बारे में बताने की गुंजाइश है.

अगर साइट पर कॉन्टेक्स्ट के हिसाब से स्कीम लागू की जाती हैं, तो तीन अलग-अलग स्थितियों की भी ज़रूरत होती है.जैसे, ओएस के गहरे रंग वाले मोड में होने पर, हल्के रंग वाला मोड. ऐसा इसलिए, क्योंकि "हल्के रंग वाला मोड" और "सिस्टम (फ़िलहाल हल्के रंग वाला मोड)" में वाकई अंतर होता है.

दो स्थितियों वाले टॉगल

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

सिर्फ़ ये दो स्थितियां होनी चाहिए:

1. सिस्टम डिफ़ॉल्ट — कोई वैल्यू सेव नहीं की गई है, <meta> कॉन्टेंट light dark. यह अपनी मौजूदा वैल्यू के तौर पर दिखता है. उदाहरण के लिए, रोशनी होने पर सूरज का आइकॉन.
2. Override — इसे light या dark के तौर पर सेव किया जाता है.

यह एक तरह का ट्राई-स्टेट कंट्रोल (light dark, light, dark) है. इसमें, सिस्टम की मौजूदा सेटिंग से मैच करने वाली साफ़ तौर पर बताई गई स्थिति को ऐक्सेस नहीं किया जा सकता.

जब उपयोगकर्ता टॉगल करता है:

1. टारगेट स्कीम = फ़िलहाल रेंडर की गई स्कीम के उलट (सेव की गई वैल्यू, अगर कोई है, तो सिस्टम की सेटिंग). उपयोगकर्ता का मकसद, "अभी जो दिख रहा है उसके उलट विकल्प चुनना" है, न कि "सिस्टम के डिफ़ॉल्ट विकल्प के उलट विकल्प चुनना".
2. अगर टारगेट, सिस्टम की मौजूदा सेटिंग से अलग है, तो उसे हूबहू सेव करें.
3. अगर टारगेट, सिस्टम की मौजूदा सेटिंग से मैच करता है, तो इसका मतलब है कि उपयोगकर्ता ने बदलाव को पहले जैसा कर दिया है: सेव की गई वैल्यू को हटाएं. इसे सेव न करें — ऐसा करने से, सिस्टम में आने वाले समय में होने वाले बदलावों के लिए, स्कीम को अदृश्य रूप से पिन कर दिया जाएगा.
4. <meta> कॉन्टेंट को सेव की गई वैल्यू पर सेट करें या अगर कोई वैल्यू नहीं है, तो light dark पर सेट करें.

अहम जानकारी: डाइवर्जेंस की जांच सिर्फ़ स्टोरेज के समय की जानी चाहिए, न कि बाद में: सिस्टम की सेटिंग में बाद में किए गए बदलावों से मैच करने वाली सेव की गई वैल्यू को बनाए रखना ज़रूरी है. कई उपयोगकर्ताओं के ओएस, दिन के समय के आधार पर स्कीम अपने-आप बदल देते हैं. जब भी दोनों एक साथ होते हैं, तो सेव की गई वैल्यू को हटाने से किसी स्कीम को पिन करना नामुमकिन हो जाता है.

उदाहरण के लिए, ओएस को लाइट मोड पर सेट करने से शुरू करें:

1. उपयोगकर्ता टॉगल करता है. गहरे रंग वाली थीम, सिस्टम की सेटिंग से अलग है. इसलिए, dark को सेव किया जाता है और साइट गहरे रंग वाली थीम में बदल जाती है.
2. ओएस की सेटिंग, गहरे रंग वाली थीम पर सेट हो जाती है. साइट गहरे रंग में ही रहती है. सेव की गई वैल्यू अब सिस्टम की सेटिंग से मैच करती है, लेकिन उसे सेव रखा जाता है.
3. ओएस की सेटिंग, लाइट थीम पर वापस सेट हो जाती है. साइट गहरे रंग में दिखती है.
4. उपयोगकर्ता टॉगल करता है. टारगेट (लाइट) सिस्टम की सेटिंग से मैच करता है. इसलिए, सेव की गई वैल्यू हटा दी जाती है और साइट फिर से सिस्टम की सेटिंग के हिसाब से काम करती है.

तीन स्थितियों वाले टॉगल

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

कॉग्निटिव लोड को कम करने के लिए, "सिस्टम" विकल्प में यह भी दिखना चाहिए कि सिस्टम की मौजूदा सेटिंग क्या है. उदाहरण के लिए:

• आइकॉन, जैसे कि सिस्टम आइकॉन के सबसे नीचे दाईं ओर सूरज का आइकॉन
• टेक्स्ट, जैसे कि "सिस्टम (फ़िलहाल लाइट थीम)"