Chrome 96 में, Android पर ऑटो डार्क थीम के लिए ऑरिजिन ट्रायल लॉन्च किया गया है. इस सुविधा की मदद से ब्राउज़र, हल्के रंग की थीम वाली साइटों पर अपने-आप जनरेट होने वाली गहरे रंग वाली थीम लागू करता है. हालांकि, ऐसा तब होता है, जब उपयोगकर्ता ने ऑपरेटिंग सिस्टम में गहरे रंग वाली थीम चुनी हो. उपयोगकर्ता, ओएस लेवल पर इस विकल्प को बंद करके या Chrome में किसी खास सेटिंग में जाकर, गहरे रंग वाली थीम से ऑप्ट-आउट कर सकते हैं.
ऑरिजिन ट्रायल के लिए साइन-अप
ऑरिजिन ट्रायल की मदद से, अपने उपयोगकर्ताओं के लिए गहरे रंग वाला एल्गोरिदम भी चालू किया जा सकता है. इससे आपको यह पता चलता है कि ऑटो डार्क थीम आपके केपीआई के हिसाब से कैसा परफ़ॉर्म करती है.
ऑरिजिन ट्रायल सेट अप करने का तरीका जानने के लिए दस्तावेज़ देखें. इसके बाद, टोकन पाने के लिए AutoDarkMode ऑरिजिन ट्रायल के लिए साइन अप करने का तरीका जानें.
अपने डिवाइस पर गहरे रंग वाली ऑटो थीम की जांच करें
DevTools के साथ
DevTools में ऑटो डार्क थीम चालू करने के लिए:
- तीन बिंदु वाले मेन्यू पर क्लिक करें.
- ज़्यादा टूल चुनें और फिर रेंडरिंग चुनें.
- अपने-आप गहरे रंग वाला मोड एम्युलेट करें विकल्प में, चालू करें को चुनें.
Android फ़ोन पर
Android फ़ोन पर, ऑटो डार्क थीम की जांच करने के लिए:
chrome://flagsपर जाएं और#darken-websites-checkbox-in-theme-settingएक्सपेरिमेंट चालू करें.- इसके बाद, तीन बिंदुओं वाले मेन्यू पर टैप करके सेटिंग और फिर थीम को चुनें. इसके बाद, साइटों पर गहरे रंग वाली थीम लागू करें, जब हो सके बॉक्स पर सही का निशान लगाएं.
अब फ़ोन पर, हल्के रंग के पेज गहरे रंग के हो जाएंगे.
हर एलिमेंट को पसंद के मुताबिक बनाना
भले ही हम सभी मामलों में ऑटो डार्क थीम को बेहतर बनाने की कोशिश करते हैं, फिर भी डेवलपर के साथ शुरुआती बातचीत ने सुझाव दिया कि वे कुछ एलिमेंट में बदलाव करना चाहते हैं, ताकि वे अपने हिसाब से और बेहतर तरीके से काम कर सकें.
इस ऑरिजिन ट्रायल में 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 प्रोजेक्ट में गड़बड़ी की शिकायत की जा रही है.
- ऑरिजिन ट्रायल के लिए सुझाव देने वाले फ़ॉर्म के ज़रिए.
इस फ़ोटो को फ़ेलिक्स बेज़ॉम्ब्स ने लिया है.