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

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

शुरुआती जानकारी

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

ग्रीन स्क्रीन कंप्यूटर मॉनिटर
ग्रीन स्क्रीन (सोर्स)

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

गहरे पर सफ़ेद रंग के वर्ड प्रोसेसर
डार्क-ऑन-व्हाइट (सोर्स)

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

WorldWideWeb ब्राउज़र में गहरे रंग पर सफ़ेद रंग का वेबपेज
The WorldWideWeb ब्राउज़र (सोर्स)

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

बिस्तर पर लेटे समय इस्तेमाल किया गया स्मार्टफ़ोन
बेड में इस्तेमाल किया गया स्मार्टफ़ोन (स्रोत: Unsplash)

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

गहरे रंग वाला मोड क्यों ज़रूरी है

आकर्षक वजहों से गहरे रंग वाला मोड

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

Mac OS System 7 में Close View
System 7 CloseView (सोर्स)

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

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

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

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

AMOLED स्क्रीन पर कम रोशनी वाला मोड

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

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

मैंने यह समझ लिया है कि कई लोगों के लिए गहरे रंग वाला मोड क्यों काफ़ी अहम है. चलिए, अब देखते हैं कि इसे कैसे पूरा किया जा सकता है.

Android Q के गहरे रंग वाले मोड की सेटिंग
Android Q की गहरे रंग वाली थीम की सेटिंग

गहरे रंग वाले मोड या गहरे रंग वाली थीम के साथ काम करने वाले ऑपरेटिंग सिस्टम में, आम तौर पर सेटिंग में कहीं भी इसे चालू करने का विकल्प होता है. macOS X पर, यह सिस्टम की प्राथमिकता के General सेक्शन में थीम (स्क्रीनशॉट) में मौजूद होता है. Windows 10 में यह Colors सेक्शन में मौजूद होता है और इसे Select your color (स्क्रीनशॉट) कहते हैं. 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 पर 13 वर्शन तक इसका इस्तेमाल किया जा सकता है. दूसरे सभी ब्राउज़र के लिए, क्या मैं सपोर्ट टेबल का इस्तेमाल कर सकती हूं देखें.

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

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

गहरे रंग वाला मोड इस्तेमाल किया जा रहा है

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

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

रणनीति लोड हो रही है

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

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

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

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

इससे ब्राउज़र को यह पता चलता है कि मेरे ऐप्लिकेशन पर किस रंग की थीम काम करती है. साथ ही, इससे उपयोगकर्ता एजेंट स्टाइलशीट के खास वैरिएंट चालू करने में मदद मिलती है. इससे ब्राउज़र को गहरे रंग के बैकग्राउंड और हल्के टेक्स्ट के साथ फ़ॉर्म फ़ील्ड को रेंडर करने, स्क्रोल बार को अडजस्ट करने या थीम-अवेयर हाइलाइट का रंग चालू करने में मदद मिलती है. color-scheme की सटीक जानकारी, सीएसएस के कलर अडजस्टमेंट मॉड्यूल लेवल 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 को क्यों लोड करता/करती हूं. गहरे रंग वाले मोड को टॉगल करके देखें और पेज को फिर से लोड करें: ऐसी स्टाइलशीट जो फ़िलहाल मेल नहीं खातीं, वे अब भी लोड होंगी, लेकिन सबसे कम प्राथमिकता वाली. ताकि वे उन संसाधनों के साथ मुकाबला न कर सकें जिनकी फ़िलहाल साइट को ज़रूरत है.

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

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

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

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 निर्देश चलाएं. इसके बाद, Emulate CSS Media Feature preference-color-scheme विकल्प बदलें.

Chrome DevTools के रेंडरिंग टैब में मौजूद, &#39;Emu स्रोत सीएसएस मीडिया फ़ीचर origins-color-scheme&#39; विकल्प का स्क्रीनशॉट

Puppeteer के साथ prefers-color-scheme का स्क्रीनशॉट लिया जा रहा है

Puppeteer एक Node.js लाइब्रेरी है जो DevTool प्रोटोकॉल पर 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) जैसा कुछ ऐप्लिकेशन सही से काम करता है.

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

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

गहरे रंग वाले मोड में हीरो इमेज की रोशनी थोड़ी कम हो गई है.
गहरे रंग वाले मोड में हीरो इमेज की रोशनी थोड़ी कम की गई.
हल्के रंग वाले मोड में हीरो इमेज.
हल्के रंग वाले मोड में सामान्य हीरो इमेज.

मेरी इमेज पर सीएसएस फ़िल्टर के ज़रिए फिर से रंग किया जा सकता है. मैं एक ऐसे सीएसएस सिलेक्टर का इस्तेमाल करता/करती हूं जिसके यूआरएल में .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);
}

इनलाइन SVGs के लिए currentColor का इस्तेमाल करें

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

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

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

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

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

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

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

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

स्वीकार हैं

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