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

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

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

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

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