prefers-color-scheme: नमस्ते, मेरे पुराने दोस्त

क्या यह सिर्फ़ एक हाइप है या वाकई ज़रूरी है? डार्क मोड के बारे में पूरी जानकारी पाएं. साथ ही, जानें कि उपयोगकर्ताओं को फ़ायदा पहुंचाने के लिए, डार्क मोड को कैसे इस्तेमाल किया जा सकता है!

Thomas Steiner

परिचय

गहरे रंग वाले मोड से पहले गहरे रंग वाला मोड

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

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

डिज़ाइन के ट्रेंड के तौर पर, डार्क-ऑन-व्हाइट की शुरुआत यहीं से हुई थी. यह ट्रेंड, दस्तावेज़ पर आधारित शुरुआती वेब पर भी लागू किया गया था. सबसे पहले ब्राउज़र, WorldWideWeb (याद रखें, सीएसएस का आविष्कार भी नहीं हुआ था) ने वेबपेजों को इस तरह दिखाया था. दिलचस्प जानकारी: दूसरा ब्राउज़र, लाइन मोड ब्राउज़र—टर्मिनल पर आधारित ब्राउज़र—गहरे रंग पर हरा था. आजकल, वेब पेज और वेब ऐप्लिकेशन आम तौर पर हल्के बैकग्राउंड पर गहरे रंग के टेक्स्ट के साथ डिज़ाइन किए जाते हैं. यह एक बुनियादी मान्यता है, जिसे उपयोगकर्ता एजेंट स्टाइलशीट में भी हार्ड-कोड किया गया है. इनमें Chrome भी शामिल है.

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

गहरे रंग वाला मोड क्यों

खूबसूरत दिखने के लिए गहरे रंग वाला मोड

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

सुलभता टूल के तौर पर गहरे रंग वाला मोड

कुछ लोगों को गहरे रंग वाले मोड की ज़रूरत होती है. वे इसे सुलभता टूल के तौर पर इस्तेमाल करते हैं. उदाहरण के लिए, कम दृष्टि वाले लोग. मुझे इस तरह के सुलभता टूल का सबसे पुराना उदाहरण System 7 में मिली CloseView सुविधा के तौर पर मिला है. इसमें ब्लैक ऑन व्हाइट और व्हाइट ऑन ब्लैक के लिए टॉगल मौजूद था. System 7 में रंगीन डिसप्ले की सुविधा थी, लेकिन डिफ़ॉल्ट यूज़र इंटरफ़ेस अब भी ब्लैक ऐंड व्हाइट था.

जब रंगीन इमेज का इस्तेमाल किया गया, तब इनवर्ज़न पर आधारित इमेज को प्रोसेस करने के तरीके की कमियां सामने आईं. Szpiro et al. ने कम रोशनी में देखने वाले लोगों के कंप्यूटिंग डिवाइसों को ऐक्सेस करने के तरीके पर उपयोगकर्ता रिसर्च की. इसमें पता चला कि इंटरव्यू में शामिल सभी लोगों को इनवर्ट की गई इमेज पसंद नहीं आईं. हालांकि, कई लोगों को गहरे रंग की बैकग्राउंड पर हल्के रंग का टेक्स्ट पसंद आया. Apple ने इस सुविधा को स्मार्ट इनवर्ट नाम दिया है. यह सुविधा, डिसप्ले पर दिखने वाले रंगों को उलट देती है. हालांकि, यह सुविधा इमेज, मीडिया, और गहरे रंग वाले स्टाइल का इस्तेमाल करने वाले कुछ ऐप्लिकेशन पर लागू नहीं होती.

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

AMOLED स्क्रीन पर गहरे रंग वाले मोड से बैटरी की बचत

आखिर में, डार्क मोड को AMOLED स्क्रीन पर बहुत ज़्यादा बैटरी बचाने के लिए जाना जाता है. Android की केस स्टडी में, YouTube जैसे Google के लोकप्रिय ऐप्लिकेशन पर फ़ोकस किया गया है. इनमें बताया गया है कि बैटरी की बचत 60% तक हो सकती है. नीचे दिए गए वीडियो में, इन केस स्टडी और हर ऐप्लिकेशन के हिसाब से बैटरी की बचत के बारे में ज़्यादा जानकारी दी गई है.

ऑपरेटिंग सिस्टम में गहरे रंग वाला मोड चालू करना

अब हमने यह जान लिया है कि गहरे रंग वाला मोड, कई लोगों के लिए इतना अहम क्यों है. इसलिए, आइए अब देखते हैं कि इसे कैसे इस्तेमाल किया जा सकता है.

गहरे रंग वाले मोड या गहरे रंग वाली थीम की सुविधा देने वाले ऑपरेटिंग सिस्टम में, आम तौर पर सेटिंग में जाकर इसे चालू करने का विकल्प होता है. macOS X में, यह सिस्टम की सेटिंग के सामान्य सेक्शन में होता है. इसे दिखावट (स्क्रीनशॉट) कहा जाता है. वहीं, Windows 10 में, यह रंग सेक्शन में होता है. इसे अपना रंग चुनें (स्क्रीनशॉट) कहा जाता है. Android Q में, इसे डिसप्ले में गहरे रंग वाली थीम टॉगल स्विच (स्क्रीनशॉट) के तौर पर देखा जा सकता है. वहीं, iOS 13 में, सेटिंग के डिसप्ले और चमक सेक्शन में जाकर, दिखने का तरीका बदला जा सकता है (स्क्रीनशॉट).

prefers-color-scheme मीडिया क्वेरी

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

prefers-color-scheme मीडिया फ़ीचर का इस्तेमाल यह पता लगाने के लिए किया जाता है कि उपयोगकर्ता ने पेज के लिए, हल्के या गहरे रंग वाली थीम का इस्तेमाल करने का अनुरोध किया है या नहीं. यह इन वैल्यू के साथ काम करता है:

• light: इससे पता चलता है कि उपयोगकर्ता ने सिस्टम को सूचना दी है कि उसे हल्के रंग वाली थीम (हल्के रंग वाले बैकग्राउंड पर गहरे रंग वाला टेक्स्ट) वाला पेज पसंद है.
• dark: इससे पता चलता है कि उपयोगकर्ता ने सिस्टम को सूचना दी है कि उसे गहरे रंग वाली थीम (गहरे रंग वाले बैकग्राउंड पर हल्के रंग वाला टेक्स्ट) वाला पेज पसंद है.

गहरे रंग वाले मोड की सुविधा

यह पता लगाना कि ब्राउज़र में डार्क मोड की सुविधा काम करती है या नहीं

डार्क मोड की जानकारी मीडिया क्वेरी के ज़रिए दी जाती है. इसलिए, यह आसानी से पता लगाया जा सकता है कि मौजूदा ब्राउज़र में डार्क मोड काम करता है या नहीं. इसके लिए, यह देखना होगा कि मीडिया क्वेरी prefers-color-scheme से कोई नतीजा मिलता है या नहीं. ध्यान दें कि मैंने कोई वैल्यू शामिल नहीं की है. हालांकि, मैंने सिर्फ़ यह जांच की है कि मीडिया क्वेरी मैच करती है या नहीं.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

यह लेख लिखते समय, prefers-color-scheme की सुविधा डेस्कटॉप और मोबाइल, दोनों पर काम करती है. हालांकि, यह सुविधा हर जगह उपलब्ध नहीं है. Chrome और Edge के 76 और इसके बाद के वर्शन, Firefox के 67 और इसके बाद के वर्शन, macOS पर Safari के 12.1 और इसके बाद के वर्शन, और iOS पर Safari के 13 और इसके बाद के वर्शन पर यह सुविधा काम करती है. अन्य सभी ब्राउज़र के लिए, Can I use support tables दस्तावेज़ देखें.

अनुरोध के समय, उपयोगकर्ता की प्राथमिकताओं के बारे में जानकारी पाना

Sec-CH-Prefers-Color-Scheme क्लाइंट हिंट हेडर की मदद से, साइटें अनुरोध के समय उपयोगकर्ता की कलर स्कीम की प्राथमिकताओं को वैकल्पिक तौर पर हासिल कर सकती हैं. इससे सर्वर सही सीएसएस को इनलाइन कर सकते हैं. इसलिए, गलत रंग वाली थीम के फ़्लैश से बचा जा सकता है.

गहरे रंग वाले मोड में प्रैक्टिस करना

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

• style.css जिसमें सामान्य नियम शामिल होते हैं. इनका इस्तेमाल साइट पर हर जगह किया जाता है.
• dark.css जिसमें सिर्फ़ डार्क मोड के लिए ज़रूरी नियम शामिल हों.
• light.css में सिर्फ़ हल्के रंग वाले मोड के लिए ज़रूरी नियम शामिल होते हैं.

डेटा लोड होने की रणनीति

बाद के दो, light.css और dark.css, <link media> क्वेरी के साथ शर्त के आधार पर लोड किए जाते हैं. शुरुआत में, सभी ब्राउज़र prefers-color-scheme के साथ काम नहीं करेंगे (ऊपर दिए गए पैटर्न का इस्तेमाल करके इसका पता लगाया जा सकता है). इसलिए, मैं डिफ़ॉल्ट light.css फ़ाइल को डाइनैमिक तरीके से लोड करता हूं. इसके लिए, मैंने छोटी सी इनलाइन स्क्रिप्ट में <link rel="stylesheet"> एलिमेंट को शर्त के साथ डाला है. (लाइट थीम को डिफ़ॉल्ट फ़ॉलबैक के तौर पर चुना गया है. डार्क थीम को भी डिफ़ॉल्ट फ़ॉलबैक के तौर पर चुना जा सकता था). बिना स्टाइल वाला कॉन्टेंट फ़्लैश होने से बचने के लिए, मैंने पेज के कॉन्टेंट को तब तक छिपाया है, जब तक light.css लोड नहीं हो जाता.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

स्टाइलशीट आर्किटेक्चर

मैं सीएसएस वैरिएबल का ज़्यादा से ज़्यादा इस्तेमाल करता हूं. इससे मेरा सामान्य style.css सामान्य रहता है. साथ ही, लाइट या डार्क मोड के लिए सभी कस्टम सेटिंग, दो अन्य फ़ाइलों dark.css और light.css में होती हैं. नीचे, आपको स्टाइल का एक अंश दिखेगा. इससे आपको स्टाइल के बारे में पूरी जानकारी मिल जाएगी. मैंने दो वैरिएबल, -⁠-⁠color और -⁠-⁠background-color तय किए हैं. इनसे गहरे रंग पर हल्के रंग और हल्के रंग पर गहरे रंग वाली बेसलाइन थीम बनती है.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

इसके बाद, मैं style.css में इन वैरिएबल का इस्तेमाल body { … } नियम में करता हूं. इन्हें :root सीएसएस स्यूडो-क्लास पर तय किया जाता है. यह एक ऐसा सिलेक्टर होता है जो एचटीएमएल में <html> एलिमेंट को दिखाता है. यह html सिलेक्टर के जैसा ही होता है. हालांकि, इसकी खास जानकारी ज़्यादा होती है. इसलिए, ये कैस्केड डाउन होते हैं. इससे मुझे ग्लोबल सीएसएस वैरिएबल के बारे में बताने में मदद मिलती है.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

ऊपर दिए गए कोड सैंपल में, आपने शायद color-scheme प्रॉपर्टी देखी होगी. इसमें स्पेस से अलग की गई वैल्यू light dark है.

इससे ब्राउज़र को पता चलता है कि मेरा ऐप्लिकेशन किन कलर थीम के साथ काम करता है. साथ ही, इससे ब्राउज़र को उपयोगकर्ता एजेंट स्टाइलशीट के खास वैरिएंट चालू करने की अनुमति मिलती है. यह वैरिएंट, उदाहरण के लिए, ब्राउज़र को गहरे रंग के बैकग्राउंड और हल्के रंग के टेक्स्ट वाले फ़ॉर्म फ़ील्ड रेंडर करने, स्क्रोल बार को अडजस्ट करने या थीम के हिसाब से हाइलाइट करने वाले रंग को चालू करने में मदद करता है. color-scheme की सटीक जानकारी, CSS Color Adjustment Module Level 1 में दी गई है.

इसके बाद, मेरी साइट पर काम की चीज़ों के लिए सीएसएस वैरिएबल तय करना ही बाकी रह जाता है. स्टाइल को सिमैंटिक तरीके से व्यवस्थित करने पर, गहरे रंग वाले मोड के साथ काम करने में बहुत मदद मिलती है. उदाहरण के लिए, -⁠-⁠highlight-yellow के बजाय, वैरिएबल को -⁠-⁠accent-color कॉल करने पर विचार करें. ऐसा इसलिए, क्योंकि हो सकता है कि डार्क मोड में "पीला" रंग, असल में पीला न हो या इसका उल्टा हो. यहां कुछ और वैरिएबल का उदाहरण दिया गया है, जिनका इस्तेमाल मैंने अपने उदाहरण में किया है.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

पूरा उदाहरण

यहां दिए गए Glitch एम्बेड में, आपको पूरा उदाहरण दिखेगा. इसमें ऊपर बताए गए कॉन्सेप्ट को लागू किया गया है. अपने ऑपरेटिंग सिस्टम की सेटिंग में जाकर, गहरे रंग वाला मोड चालू या बंद करके देखें कि पेज पर क्या बदलाव होता है.

इंपैक्ट लोड हो रहा है

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

गहरे रंग वाले मोड में बदलावों पर प्रतिक्रिया देना

किसी अन्य मीडिया क्वेरी में बदलाव की तरह ही, JavaScript के ज़रिए गहरे रंग वाले मोड में बदलावों की सूचना पाने के लिए सदस्यता ली जा सकती है. इसका इस्तेमाल, उदाहरण के लिए, किसी पेज के फ़ेविकॉन को डाइनैमिक तौर पर बदलने या <meta name="theme-color"> को बदलने के लिए किया जा सकता है. यह Chrome में यूआरएल बार के रंग को तय करता है. ऊपर दिए गए पूरे उदाहरण में, इसे ऐक्शन में दिखाया गया है. थीम के रंग और फ़ेविकॉन में हुए बदलाव देखने के लिए, डेमो को अलग टैब में खोलें.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

Chromium 93 और Safari 15 से, meta थीम कलर एलिमेंट के media एट्रिब्यूट की मदद से, मीडिया क्वेरी के आधार पर रंग को अडजस्ट किया जा सकता है. जो भी पहला मैच मिलेगा उसे चुन लिया जाएगा. उदाहरण के लिए, हल्के रंग वाले मोड के लिए एक रंग और गहरे रंग वाले मोड के लिए दूसरा रंग चुना जा सकता है. लिखते समय, मेनिफ़ेस्ट में इन्हें तय नहीं किया जा सकता. w3c/manifest#975 GitHub समस्या देखें.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

गहरे रंग वाले मोड को डीबग करना और उसकी जांच करना

DevTools में prefers-color-scheme को सिम्युलेट करना

पूरे ऑपरेटिंग सिस्टम की कलर स्कीम बदलने से, काम करने में परेशानी हो सकती है. इसलिए, Chrome DevTools अब आपको उपयोगकर्ता की पसंदीदा कलर स्कीम को इस तरह से बदलने की सुविधा देता है कि इसका असर सिर्फ़ मौजूदा टैब पर पड़े. कमांड मेन्यू खोलें, Rendering टाइप करना शुरू करें, Show Rendering कमांड चलाएं, और फिर सीएसएस मीडिया फ़ीचर prefers-color-scheme को एम्युलेट करें विकल्प बदलें.

Puppeteer की मदद से prefers-color-scheme का स्क्रीनशॉट लेना

Puppeteer एक Node.js लाइब्रेरी है. यह DevTools Protocol के ज़रिए Chrome या Chromium को कंट्रोल करने के लिए, हाई-लेवल एपीआई उपलब्ध कराती है. dark-mode-screenshot की मदद से, हम Puppeteer स्क्रिप्ट उपलब्ध कराते हैं. इसकी मदद से, गहरे और हल्के रंग वाले मोड, दोनों में अपने पेजों के स्क्रीनशॉट बनाए जा सकते हैं. इस स्क्रिप्ट को एक बार चलाया जा सकता है. इसके अलावा, इसे अपने कंटीन्यूअस इंटिग्रेशन (सीआई) टेस्ट सुइट का हिस्सा बनाया जा सकता है.

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

डार्क मोड इस्तेमाल करने के सबसे सही तरीके

पूरी तरह से सफ़ेद रंग का इस्तेमाल न करें

आपने शायद इस बात पर ध्यान दिया हो कि मैं पूरी तरह से सफ़ेद रंग का इस्तेमाल नहीं करता. इसके बजाय, आस-पास के गहरे रंग के कॉन्टेंट के मुकाबले, चमकने और धुंधला होने से रोकने के लिए, मैं थोड़ा गहरा सफ़ेद रंग चुनता/चुनती हूं. rgb(250, 250, 250) जैसे कुछ शब्दों का इस्तेमाल करना बेहतर होता है.

फ़ोटोग्राफ़िक इमेज को फिर से रंगीन बनाना और गहरा करना

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

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

री-कलर करने की सुविधा सिर्फ़ डार्क मोड में ज़रूरी होती है. इसका मतलब है कि यह सुविधा सिर्फ़ तब काम करती है, जब dark.css चालू हो. इसलिए, light.css में इससे जुड़े कोई नियम नहीं हैं.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

JavaScript की मदद से, गहरे रंग वाले मोड में फिर से रंग भरने की इंटेंसिटी को पसंद के मुताबिक बनाना

सभी लोग एक जैसे नहीं होते और लोगों की डार्क मोड से जुड़ी ज़रूरतें अलग-अलग होती हैं. ऊपर बताए गए रंग बदलने के तरीके का इस्तेमाल करके, मैं आसानी से ग्रेस्केल इंटेंसिटी को उपयोगकर्ता की पसंद के मुताबिक बना सकता हूं. इसे JavaScript की मदद से बदला जा सकता है. साथ ही, 0% की वैल्यू सेट करके, रंग बदलने की सुविधा को पूरी तरह से बंद भी किया जा सकता है. ध्यान दें कि document.documentElement दस्तावेज़ के रूट एलिमेंट का रेफ़रंस देता है. इसका मतलब है कि यह वही एलिमेंट है जिसे मैं :root सीएसएस स्यूडो-क्लास के साथ रेफ़रंस कर सकता हूं.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

वेक्टर ग्राफ़िक और आइकॉन के रंग बदलना

वेक्टर ग्राफ़िक के लिए, मैं रंग बदलने का एक अलग तरीका इस्तेमाल करता हूं. मेरे मामले में, इनका इस्तेमाल आइकॉन के तौर पर किया जाता है. मैं इन्हें <img> एलिमेंट के ज़रिए रेफ़रंस करता हूं. रिसर्च से पता चला है कि लोगों को फ़ोटो के लिए रंग उलटने की सुविधा पसंद नहीं है. हालांकि, यह सुविधा ज़्यादातर आइकॉन के लिए बहुत अच्छी तरह से काम करती है. मैंने फिर से सीएसएस वैरिएबल का इस्तेमाल किया है, ताकि सामान्य और :hover स्थिति में इनवर्ज़न की मात्रा का पता लगाया जा सके.

ध्यान दें कि मैंने सिर्फ़ dark.css में आइकॉन के रंग बदले हैं, light.css में नहीं. साथ ही, :hover में आइकॉन के रंग बदलने की इंटेंसिटी, दोनों मामलों में अलग-अलग है, ताकि आइकॉन को थोड़ा गहरा या थोड़ा हल्का दिखाया जा सके. यह इस बात पर निर्भर करता है कि उपयोगकर्ता ने कौन-सा मोड चुना है.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

इनलाइन एसवीजी के लिए currentColor का इस्तेमाल करना

इनलाइन एसवीजी इमेज के लिए, इनवर्ज़न फ़िल्टर इस्तेमाल करने के बजाय, currentColor सीएसएस कीवर्ड का इस्तेमाल किया जा सकता है. यह कीवर्ड, किसी एलिमेंट की color प्रॉपर्टी की वैल्यू दिखाता है. इससे, उन प्रॉपर्टी पर color वैल्यू का इस्तेमाल किया जा सकता है जिन्हें डिफ़ॉल्ट रूप से यह वैल्यू नहीं मिलती. अगर SVG fill या stroke एट्रिब्यूट की वैल्यू के तौर पर currentColor का इस्तेमाल किया जाता है, तो यह रंग प्रॉपर्टी की इनहेरिट की गई वैल्यू से वैल्यू लेता है. इससे भी बेहतर: यह सुविधा <svg><use href="…"></svg> के लिए भी काम करती है. इसलिए, आपके पास अलग-अलग संसाधन हो सकते हैं और currentColor को अब भी संदर्भ के हिसाब से लागू किया जाएगा. कृपया ध्यान दें कि यह सिर्फ़ इनलाइन या <use href="…"> एसवीजी के लिए काम करता है. हालांकि, यह उन एसवीजी के लिए काम नहीं करता जिन्हें इमेज के src के तौर पर या सीएसएस के ज़रिए रेफ़रंस किया जाता है. नीचे दिए गए डेमो में, इसे लागू किया गया है.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

मोड के बीच आसानी से स्विच करना

डार्क मोड से लाइट मोड या इसके उलट स्विच करने की प्रोसेस को आसान बनाया जा सकता है. ऐसा इसलिए, क्योंकि color और background-color, दोनों ऐनिमेट की जा सकने वाली सीएसएस प्रॉपर्टी हैं. ऐनिमेशन बनाना उतना ही आसान है जितना दो प्रॉपर्टी के लिए दो transition तय करना. नीचे दिए गए उदाहरण में, इस सुविधा के बारे में बताया गया है. इसे लाइव देखने के लिए, डेमो पर जाएं.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

गहरे रंग वाले मोड के साथ आर्ट डायरेक्शन

आम तौर पर, लोड होने की परफ़ॉर्मेंस को बेहतर बनाने के लिए, मैं सिर्फ़ <link> एलिमेंट के media एट्रिब्यूट में prefers-color-scheme का इस्तेमाल करने का सुझाव देता हूं. हालांकि, कुछ मामलों में आपको एचटीएमएल कोड में सीधे तौर पर prefers-color-scheme का इस्तेमाल करना पड़ सकता है. आर्ट डायरेक्शन ऐसी ही एक स्थिति है. वेब पर, आर्ट डायरेक्शन का मतलब किसी पेज के विज़ुअल लुक से है. साथ ही, इससे यह भी पता चलता है कि पेज पर मौजूद कॉन्टेंट को विज़ुअल तरीके से कैसे दिखाया गया है, इससे लोगों की भावनाओं पर क्या असर पड़ता है, अलग-अलग सुविधाओं के बीच अंतर कैसे दिखाया गया है, और इससे टारगेट ऑडियंस पर मनोवैज्ञानिक रूप से क्या असर पड़ता है.

डार्क मोड में, डिज़ाइनर यह तय करता है कि किसी मोड में सबसे अच्छी इमेज कौनसी है. साथ ही, वह यह भी तय करता है कि इमेज को फिर से कलर करना शायद अच्छा नहीं है. <picture> एलिमेंट के साथ इस्तेमाल करने पर, दिखाई जाने वाली इमेज का <source>, media एट्रिब्यूट पर निर्भर हो सकता है. नीचे दिए गए उदाहरण में, मैंने गहरे रंग वाले मोड के लिए पश्चिमी गोलार्ध और हल्के रंग वाले मोड के लिए पूर्वी गोलार्ध दिखाया है. इसके अलावा, जब कोई प्राथमिकता नहीं दी जाती है, तो सभी मामलों में डिफ़ॉल्ट रूप से पूर्वी गोलार्ध दिखता है. बेशक, यह सिर्फ़ उदाहरण के तौर पर दिखाया गया है. अपने डिवाइस पर गहरे रंग वाला मोड टॉगल करके, अंतर देखें.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

गहरे रंग वाला मोड, लेकिन ऑप्ट-आउट करने का विकल्प जोड़ें

ऊपर दिए गए गहरे रंग वाला मोड क्यों इस्तेमाल करें सेक्शन में बताया गया है कि ज़्यादातर लोगों को गहरे रंग वाला मोड पसंद होता है. इस वजह से, कुछ लोगों को ऑपरेटिंग सिस्टम का यूज़र इंटरफ़ेस (यूआई) गहरे रंग में देखना पसंद हो सकता है. हालांकि, वे अपने वेबपेजों को उसी तरह देखना चाहें जिस तरह वे उन्हें देखते आए हैं. सबसे अच्छा तरीका यह है कि शुरुआत में, ब्राउज़र prefers-color-scheme के ज़रिए भेजे गए सिग्नल का पालन किया जाए. हालांकि, इसके बाद उपयोगकर्ताओं को सिस्टम-लेवल की सेटिंग बदलने का विकल्प दिया जा सकता है.

<dark-mode-toggle> कस्टम एलिमेंट

आपके पास इस कोड को खुद बनाने का विकल्प है. हालांकि, इसके लिए तैयार किए गए कस्टम एलिमेंट (वेब कॉम्पोनेंट) का भी इस्तेमाल किया जा सकता है. इसे मैंने खास तौर पर इसी काम के लिए बनाया है. इसे <dark-mode-toggle> कहा जाता है. यह आपके पेज पर टॉगल (गहरे रंग वाला मोड: चालू/बंद) या थीम स्विचर (थीम: हल्के रंग वाली/गहरे रंग वाली) जोड़ता है. इसे अपनी पसंद के मुताबिक बनाया जा सकता है. यहां दिए गए डेमो में, एलिमेंट को ऐक्शन में दिखाया गया है (ओह, और मैंने इसे ऊपर दिए गए 🤫 सभी अन्य उदाहरणों में भी शामिल कर दिया है).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

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

मीटिंग में सामने आए नतीजे

डार्क मोड के साथ काम करना और इसे सपोर्ट करना मज़ेदार है. साथ ही, इससे डिज़ाइन के नए विकल्प मिलते हैं. आपकी साइट पर आने वाले कुछ लोगों के लिए, यह फ़र्क़ काफ़ी अहम हो सकता है. इससे उन्हें आपकी साइट को इस्तेमाल करने में आसानी होगी और वे आपकी साइट का बेहतर तरीके से इस्तेमाल कर पाएंगे. डार्क मोड में कुछ कमियां हो सकती हैं और इसकी सावधानीपूर्वक जांच करना ज़रूरी है. हालांकि, डार्क मोड की सुविधा उपलब्ध कराकर, यह दिखाया जा सकता है कि आपको अपने सभी उपयोगकर्ताओं की परवाह है. इस पोस्ट में बताए गए सबसे सही तरीकों और <dark-mode-toggle> कस्टम एलिमेंट जैसे हेल्पर की मदद से, आपको गहरे रंग वाला मोड इस्तेमाल करने का शानदार अनुभव मिलेगा. Twitter पर हमें बताएं कि आपने क्या बनाया और यह पोस्ट आपके लिए मददगार थी या नहीं. साथ ही, इसे बेहतर बनाने के लिए सुझाव भी दें. पढ़ने के लिए धन्यवाद! 🌒

इसी विषय से जुड़े कुछ लिंक

prefers-color-scheme मीडिया क्वेरी के लिए संसाधन:

• Chrome Platform Status पेज
• Chromium में गड़बड़ी
• मीडिया क्वेरी लेवल 5 की खास जानकारी

color-scheme मेटा टैग और सीएसएस प्रॉपर्टी के लिए संसाधन:

• color-scheme सीएसएस प्रॉपर्टी और मेटा टैग
• Chrome Platform Status पेज
• Chromium में गड़बड़ी
• सीएसएस कलर अडजस्टमेंट मॉड्यूल लेवल 1 स्पेसिफ़िकेशन
• मेटा टैग और सीएसएस प्रॉपर्टी के लिए, सीएसएस डब्ल्यूजी GitHub की समस्या
• मेटा टैग के लिए, एचटीएमएल WHATWG GitHub समस्या

गहरे रंग वाले मोड के सामान्य लिंक:

• मटीरियल डिज़ाइन—गहरे रंग वाली थीम
• Web Inspector में गहरे रंग वाला मोड
• WebKit में गहरे रंग वाले मोड की सुविधा
• Apple के ह्यूमन इंटरफ़ेस से जुड़े दिशा-निर्देश—गहरे रंग वाला मोड

इस पोस्ट के लिए बैकग्राउंड रिसर्च के लेख:

• डार्क मोड की "supported-color-schemes" प्रॉपर्टी का असल में क्या काम है? 🤔
• अंधेरा हो जाए! 🌚 शायद…
• गहरे रंग वाले मोड के लिए फिर से रंग भरने की सुविधा

Acknowledgements

prefers-color-scheme मीडिया फ़ीचर, color-scheme सीएसएस प्रॉपर्टी, और इससे जुड़ा मेटा टैग, 👏 Rune Lillesveen ने लागू किया है. रून, सीएसएस कलर अडजस्टमेंट मॉड्यूल लेवल 1 स्पेसिफ़िकेशन के सह-संपादक भी हैं. मैं इस लेख की समीक्षा करने के लिए, लुकाज़ ज़्बिलट, रोवन मेरवुड, चिराग देसाई, और रॉब डॉडसन को 🙏 धन्यवाद देना चाहता हूं. लोडिंग की रणनीति को जेक आर्चीबाल्ड ने बनाया है. Emilio Cobos Álvarez ने मुझे prefers-color-scheme का पता लगाने का सही तरीका बताया है. रेफ़र किए गए एसवीजी और currentColor के साथ यह सलाह टिमोथी हैचर ने दी है. आखिर में, मैं उन सभी लोगों का शुक्रिया अदा करना चाहता हूं जिन्होंने यूज़र स्टडी में हिस्सा लिया. इन स्टडी से हमें इस लेख में दिए गए सुझावों को बेहतर बनाने में मदद मिली.