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

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

Thomas Steiner

परिचय

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 डेस्कटॉप और मोबाइल (जहां उपलब्ध हो) दोनों पर काम करता है वर्शन 76 से, Firefox और उसके 67 वर्शन में, और Safari को macOS पर वर्शन 12.1 और iOS पर 13 के बाद से अपडेट किया गया है. अन्य सभी ब्राउज़र के लिए, क्या मेरे पास सहायता टेबल इस्तेमाल करने का विकल्प है.

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

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

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

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

• 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 सीएसएस pseudo-class—a सिलेक्टर, जो एचटीएमएल में <html> एलिमेंट को दिखाता है और यह सिलेक्टर html के जैसा ही है, अंतर सिर्फ़ इतना है कि इसकी विशेषता है पहले से इस्तेमाल होते हैं. इससे मुझे ग्लोबल सीएसएस वैरिएबल का एलान करने में मदद मिलती है.

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

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

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

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

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

मीडिया क्वेरी में किए गए दूसरे बदलावों की तरह ही, गहरे रंग वाले मोड में किए गए बदलावों की सदस्यता 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 की मदद से अब लोगों की पसंदीदा कलर स्कीम को एम्युलेट किया जा सकता है जो केवल वर्तमान में दिखाई दे रहे टैब को प्रभावित करती है. Command मेन्यू खोलें, Rendering टाइप करना शुरू करें, Show Rendering कमांड चलाएं. इसके बाद, Emulate CSS मीडिया फ़ीचर privates-color-scheme विकल्प को बदलें.

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

Puppeteer एक Node.js लाइब्रेरी है जो Chrome या Chromium को कंट्रोल करने के लिए, एक हाई-लेवल एपीआई उपलब्ध कराता है DevTools प्रोटोकॉल. 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 सीएसएस pseudo-class.

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

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

वेक्टर ग्राफ़िक के लिए—जो मेरे मामले में <img> एलिमेंट के ज़रिए रेफ़रंस के तौर पर इस्तेमाल किए जाते हैं—मैं रंग भरने के किसी अन्य तरीके का इस्तेमाल करें. हालांकि, रिसर्च से पता चला है कि लोग फ़ोटो के लिए उलटा पसंद नहीं करते, यह ज़्यादातर आइकन के लिए अच्छी तरह से काम करता है. मैं एक बार फिर से व्युत्क्रम राशि तय करने के लिए CSS वैरिएबल का इस्तेमाल करता/करती हूं सामान्य और :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);
}

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

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

<!-- 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);
}

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

आम तौर पर, लोड होने की परफ़ॉर्मेंस की वजहों के लिए, मेरा सुझाव है कि आप सिर्फ़ prefers-color-scheme के साथ काम करें <link> एलिमेंट के media एट्रिब्यूट में (स्टाइलशीट में इनलाइन के बजाय), ऐसी स्थिति में भी हो सकता है कि आपको अपने एचटीएमएल कोड में सीधे तौर पर 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 प्लैटफ़ॉर्म का स्टेटस पेज
• Chromium की गड़बड़ी
• मीडिया क्वेरी लेवल 5 की खास जानकारी

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

• color-scheme सीएसएस प्रॉपर्टी और मेटा टैग
• Chrome प्लैटफ़ॉर्म का स्टेटस पेज
• Chromium की गड़बड़ी
• सीएसएस के कलर अडजस्टमेंट मॉड्यूल के लेवल 1 की खास जानकारी
• मेटा टैग और सीएसएस प्रॉपर्टी के लिए, सीएसएस WG GitHub से जुड़ी समस्या
• मेटा टैग के लिए, HTML CREATORWG GitHub से जुड़ी समस्या

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

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

इस पोस्ट के लिए बैकग्राउंड में होने वाली रिसर्च से जुड़े लेख:

• गहरे रंग वाले मोड में मौजूद "supported-color-scheme" क्या है असल में ऐसा करते हैं? 🤔
• अंधेरा होने दो! 🌚 शायद...
• गहरे रंग वाले मोड को फिर से रंग में बदलना

स्वीकार की गई

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