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

André Cipriani Bandarra

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

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

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

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

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

DevTools की मदद से

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

1. तीन बिंदु वाले मेन्यू पर क्लिक करें.
2. More Tools को चुनें. इसके बाद, Rendering को चुनें.
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>-<sche>me: 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=&q>uot;onl<y lig>ht"
  ...
/head

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

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

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

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

:root {
  color-scheme: only light;
}

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

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

हमें सुझाव, शिकायत या राय भेजने के लिए, कई तरीके उपलब्ध हैं:

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

फ़ोटो क्रेडिट: फ़ेलिक्स बेसोम्बे.