अपने-आप गहरे रंग वाली थीम

André Cipriani Bandarra

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

ऑरिजिन ट्रायल के लिए साइन-अप करें

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

ज़्यादा जानकारी के लिए दस्तावेज़ पर जाएं ऑरिजिन ट्रायल कैसे सेट अप करें, इसके बाद, AutoDarkMode के ऑरिजिन ट्रायल के लिए साइन अप करें टोकन पाने के लिए.

अपने डिवाइस पर, ऑटो डार्क थीम की जांच करें

DevTools की मदद से

DevTools में ऑटो डार्क थीम चालू करने के लिए:

  1. तीन बिंदु वाले मेन्यू पर क्लिक करें.
  2. ज़्यादा टूल चुनें, फिर रेंडरिंग करें चुनें.
  3. गहरे रंग वाले मोड को अपने-आप चालू करें विकल्प पर जाकर, चालू करें को चुनें.

Android फ़ोन पर

अपने Android फ़ोन पर, ऑटो डार्क थीम को टेस्ट करने के लिए:

  1. chrome://flags पर जाएं और #darken-websites-checkbox-in-theme-setting एक्सपेरिमेंट को चालू करें.
  2. इसके बाद, तीन बिंदु वाले मेन्यू पर टैप करके, सेटिंग और फिर थीम चुनें. इसके बाद, जब भी मुमकिन हो, साइटों पर गहरे रंग वाली थीम लागू करें वाले बॉक्स पर सही का निशान लगाएं.

अब, फ़ोन पर हल्के रंग वाले पेज गहरे रंग के हो जाएंगे.

हर एलिमेंट को पसंद के मुताबिक बनाना

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

ऑरिजिन ट्रायल में, JavaScript का इस्तेमाल करके, चीज़ों को पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल किया जा सकता है. इससे यह पता लगाया जा सकता है कि उपयोगकर्ता, ऑटो डार्क थीम में है या नहीं. इसके बाद, अपनी पसंद के एलिमेंट को पसंद के मुताबिक बनाया जा सकता है.

गहरे रंग वाली ऑटो थीम का पता लगाया जा रहा है

यह पता लगाने के लिए कि उपयोगकर्ता, ऑटो डार्क थीम में है या नहीं, ऐसा एलिमेंट बनाएं जिसमें background-color को canvas पर सेट किया गया हो और कलर-स्कीम को हल्के पर सेट किया गया हो. अगर बैकग्राउंड के लिए कंप्यूट किया गया रंग सफ़ेद (rgb(255, 255, 255)) से अलग है, तो इसके बाद, पेज पर ऑटो डार्क थीम लागू की जाती है.

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

एलिमेंट की बड़ी संख्या को पसंद के मुताबिक बनाना

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

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

इसके बाद, एलिमेंट को ज़रूरत के मुताबिक बनाने के लिए सीएसएस का इस्तेमाल करें:

.auto-dark-theme > #my-element {
  border-color: red;
}

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

ऑटो डार्क थीम से ऑप्ट-आउट करने का तरीका

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

हालांकि, अगर गहरे रंग वाली थीम लागू नहीं की जा सकती, तो साथ ही, ऑटो डार्क थीम से जनरेट होने वाला नतीजा उम्मीद के मुताबिक नहीं है, इस सुविधा से ऑप्ट आउट किया जा सकता है.

मेटा टैग का इस्तेमाल करना

ऑटो डार्क थीम से ऑप्ट आउट करने का पहला विकल्प यह है कि अपने पेज के हेडर में यहां दिया गया मेटा टैग जोड़ें. मेटा टैग का इस्तेमाल करने का फ़ायदा यह है कि यह ऑटो डार्क थीम को लागू होने से रोकता है, इससे "गहरे रंग वाला कॉन्टेंट फ़्लैश हो सकता है".

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

हर एलिमेंट के लिए ऑप्ट-आउट

ऑप्ट आउट करने का दूसरा विकल्प, color-scheme की वैल्यू सेट करना है only light के लिए सीएसएस प्रॉपर्टी. हर एलिमेंट के लिए ऑप्ट-आउट की सुविधा का इस्तेमाल करके, पूरे पेज के लिए ऑटो डार्क मोड से ऑप्ट-आउट किया जा सकता है. इस तरीके का एक फ़ायदा यह है कि आपको पेज के सिर्फ़ कुछ हिस्सों से ऑप्ट आउट करने की अनुमति मिलती है:

#my-element {
  color-scheme: only light;
}

:root एलिमेंट पर कलर-स्कीम सेट करके, पूरे पेज को ऑटो डार्क थीम से ऑप्ट-आउट करने के लिए, अब भी इस तरीके का इस्तेमाल किया जा सकता है:

:root {
  color-scheme: only light;
}

हमें सुझाव भेजें!

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

ऐसे कई चैनल हैं जिनके बारे में हमें सुझाव/राय देनी है या शिकायत करनी है:

Félix Besombes की ओर से फ़ोटो.