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

André Cipriani Bandarra

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

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

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

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

अपने डिवाइस पर, गहरे रंग वाली थीम अपने-आप चालू होने की सुविधा को टेस्ट करना

DevTools की मदद से

DevTools में, गहरे रंग वाली थीम के अपने-आप चालू होने की सुविधा चालू करने के लिए:

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

Android फ़ोन पर

अपने Android फ़ोन पर, गहरे रंग वाली थीम अपने-आप चालू होने की सुविधा को आज़माने के लिए:

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

अब, फ़ोन पर हल्के रंग के पेजों को गहरे रंग में दिखाया जाएगा.

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

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

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

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

अपने-आप गहरे रंग वाली थीम चालू होने का पता लगाना

यह पता लगाने के लिए कि उपयोगकर्ता ऑटो डार्क थीम में है या नहीं, एक ऐसा एलिमेंट बनाएं जिसमें 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;
}

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

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

हमें सुझाव/राय भेजने या शिकायत करने के कई तरीके हैं:

• डेवलपर सर्वे के ज़रिए.
• Chromium प्रोजेक्ट में गड़बड़ी की शिकायत करना.
• ऑरिजिन ट्रायल के लिए सुझाव फ़ॉर्म के ज़रिए.

फ़ेलिक्स बेसोम्बेस की फ़ोटो.