color-scheme
सीएसएस प्रॉपर्टी और उससे जुड़े मेटा टैग की मदद से, डेवलपर अपने पेजों को उपयोगकर्ता एजेंट की स्टाइलशीट की थीम के हिसाब से डिफ़ॉल्ट सेटिंग में ऑप्ट इन कर सकते हैं.
बैकग्राउंड
prefers-color-scheme
उपयोगकर्ता की पसंद के मुताबिक मीडिया सुविधा
prefers-color-scheme
उपयोगकर्ता की पसंद की मीडिया सुविधा से, डेवलपर को यह तय करने में मदद मिलती है कि उनके पेज किस तरह दिखें.
अगर आपको इसके बारे में कोई जानकारी नहीं है, तो कृपया मेरा लेख पढ़ें
prefers-color-scheme
: नमस्ते डार्कनेस, मेरे पुराने दोस्त
जहां मैंने गहरे रंग वाले मोड के शानदार अनुभव से जुड़ी सारी जानकारी एक जगह सेव कर रखी है.
पहेली के एक हिस्से के बारे में इस लेख में सिर्फ़ कुछ देर के लिए बताया गया है. वह है color-scheme
सीएसएस प्रॉपर्टी और इसी नाम से जुड़ा मेटा टैग.
ये दोनों नीतियां, आपको अपने पेज को उपयोगकर्ता एजेंट स्टाइलशीट के थीम के हिसाब से डिफ़ॉल्ट सेटिंग के हिसाब से चुनने की अनुमति देती हैं. जैसे, फ़ॉर्म कंट्रोल, स्क्रोल बार, और सीएसएस सिस्टम के रंग.
साथ ही, यह सुविधा, ब्राउज़र को खुद से कोई भी ट्रांसफ़ॉर्मेशन करने से रोकती है.
ब्राउज़र समर्थन
prefers-color-scheme
color-scheme
उपयोगकर्ता एजेंट स्टाइलशीट
जारी रखने से पहले, मैं आपको कम शब्दों में बता दूँ कि उपयोगकर्ता एजेंट की स्टाइलशीट क्या होती है. ज़्यादातर समय, आप उपयोगकर्ता एजेंट (UA) को ब्राउज़र बोलने के अनोखे तरीके के तौर पर मान सकते हैं. UA स्टाइलशीट किसी पेज का डिफ़ॉल्ट लुक और स्टाइल तय करती है. जैसा कि नाम से ही पता चलता है, UA स्टाइलशीट एक ऐसी चीज़ है जो बताई गई UA पर निर्भर करती है. आप Chrome और Chromium की UA स्टाइलशीट पर एक नज़र डाल सकते हैं और उसकी तुलना Firefox या Safari (और WebKit) से कर सकते हैं. आम तौर पर, UA स्टाइलशीट ज़्यादातर चीज़ों पर सहमति देती हैं. उदाहरण के लिए, वे सभी लिंक का रंग नीला, सामान्य टेक्स्ट काला, और बैकग्राउंड का रंग सफ़ेद बनाते हैं, लेकिन उनमें अहम (और कभी-कभी परेशान करने वाले) अंतर भी होते हैं. जैसे, फ़ॉर्म कंट्रोल को कैसे स्टाइल किया जाता है.
WebKit की UA स्टाइलशीट और गहरे रंग वाले मोड के बारे में जानें.
(स्टाइलशीट में "डार्क" शब्द के लिए पूरा टेक्स्ट खोजें.)
स्टाइलशीट से मिलने वाला डिफ़ॉल्ट नियम इस आधार पर बदल जाता है कि डार्क मोड चालू है या बंद.
इसे दिखाने के लिए, यहां एक सीएसएस नियम दिया गया है. इसमें :matches
pseudo class और WebKit-internal वैरिएबल, जैसे कि -apple-system-control-background
के साथ-साथ WebKit-internal प्रीप्रोसेसर डायरेक्टिव #if defined
का इस्तेमाल किया गया है:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
आपको ऊपर दी गई color
और background-color
प्रॉपर्टी के लिए कुछ ऐसी वैल्यू दिखेंगी जो स्टैंडर्ड नहीं हैं.
text
या -apple-system-control-background
, सीएसएस के मान्य रंग नहीं हैं.
ये WebKit-इंटरनल सिमेंटिक कलर हैं.
इससे पता चलता है कि सीएसएस में स्टैंडर्ड सिमैंटिक सिस्टम कलर इस्तेमाल किए गए हैं.
इनकी जानकारी सीएसएस के कलर मॉड्यूल लेवल 4 में दी गई है.
उदाहरण के लिए, Canvas
(इसे <canvas>
टैग के तौर पर इस्तेमाल नहीं किया जाना चाहिए), ऐप्लिकेशन के कॉन्टेंट या दस्तावेज़ों के बैकग्राउंड के लिए है. वहीं, CanvasText
का मतलब ऐप्लिकेशन के कॉन्टेंट या दस्तावेज़ों में मौजूद टेक्स्ट के लिए है.
ये दोनों ही काम करते हैं और इनका इस्तेमाल अलग-अलग नहीं करना चाहिए.
UA स्टाइलशीट में अपने मालिकाना हक या स्टैंडर्ड सिमैंटिक सिस्टम कलर का इस्तेमाल किया जा सकता है. इससे, यह तय करने में मदद मिलती है कि एचटीएमएल एलिमेंट को डिफ़ॉल्ट रूप से कैसे रेंडर किया जाना चाहिए.
अगर ऑपरेटिंग सिस्टम गहरे रंग वाले मोड पर सेट है या गहरे रंग वाली थीम का इस्तेमाल करता है, तो
CanvasText
(या text
) को शर्त के साथ सफ़ेद रंग पर सेट कर दिया जाएगा.
साथ ही, Canvas
(या -apple-system-control-background
) को काले रंग पर सेट कर दिया जाएगा.
इसके बाद, UA स्टाइलशीट सिर्फ़ एक बार नीचे दिए गए सीएसएस को असाइन करती है और हल्के और गहरे रंग वाले मोड, दोनों को कवर करती है.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
color-scheme
सीएसएस प्रॉपर्टी
सीएसएस के कलर अडजस्टमेंट मॉड्यूल लेवल 1 की मदद से, उपयोगकर्ता एजेंट के लिए, अपने-आप रंग में होने वाले बदलाव के लिए मॉडल और कंट्रोल उपलब्ध हैं. इनका मकसद, गहरे रंग वाला मोड, कंट्रास्ट या अपनी पसंद के हिसाब से कलर स्कीम जैसी सेटिंग को मैनेज करना है.
इसमें बताई गई color-scheme
प्रॉपर्टी की मदद से, किसी एलिमेंट को यह बताया जा सकता है कि उसे किस कलर स्कीम के साथ रेंडर करना आसान है.
ये वैल्यू, उपयोगकर्ता की पसंद के हिसाब से तय की जाती हैं. इस वजह से, एक ऐसी कलर स्कीम चुनी जाती है जिसका असर यूज़र इंटरफ़ेस (यूआई) पर पड़ता है. जैसे, फ़ॉर्म कंट्रोल के डिफ़ॉल्ट कलर और स्क्रोल बार के साथ-साथ सीएसएस सिस्टम में इस्तेमाल की गई कलर की वैल्यू.
फ़िलहाल, ये वैल्यू इस्तेमाल की जा सकती हैं:
normal
से पता चलता है कि एलिमेंट को कलर स्कीम के बारे में कोई जानकारी नहीं है. इसलिए, एलिमेंट को ब्राउज़र की डिफ़ॉल्ट कलर स्कीम के साथ रेंडर किया जाना चाहिए.[ light | dark ]+
से पता चलता है कि एलिमेंट को सूची में दी गई कलर स्कीम के बारे में पता है और वह उन्हें इस्तेमाल कर सकता है. साथ ही, यह उनके बीच एक क्रम में प्राथमिकता तय करता है.
इस सूची में, light
हल्के बैकग्राउंड के रंगों और फ़ोरग्राउंड के गहरे रंगों के साथ हल्के रंग की स्कीम दिखाता है. वहीं, dark
गहरे रंग के बैकग्राउंड और हल्के फ़ोरग्राउंड के रंगों को दिखाता है.
सभी एलिमेंट के लिए, कलर स्कीम के साथ रेंडर करने पर ब्राउज़र के दिए गए सभी यूज़र इंटरफ़ेस (यूआई) में इस्तेमाल किए गए कलर, एलिमेंट के लिए कलर स्कीम के इंटेंट से मैच होने चाहिए. उदाहरण के लिए, स्क्रोल बार, स्पेलचेक अंडरलाइन, फ़ॉर्म कंट्रोल वगैरह.
:root
एलिमेंट पर, कलर स्कीम के साथ रेंडर करने से, कैनवस के सरफ़ेस का रंग (यानी कि ग्लोबल बैकग्राउंड रंग), color
प्रॉपर्टी की शुरुआती वैल्यू, और सिस्टम के रंगों की इस्तेमाल की गई वैल्यू पर भी असर पड़ना चाहिए. साथ ही, इसका असर व्यूपोर्ट के स्क्रोल बार पर भी होना चाहिए.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
color-scheme
मेटा टैग
color-scheme
सीएसएस प्रॉपर्टी के लिए ज़रूरी है कि सीएसएस को पहले डाउनलोड किया जाए (अगर इसे <link rel="stylesheet">
के ज़रिए रेफ़र किया गया है) और उसे पार्स किया जाए.
अपनी पसंद की कलर स्कीम के साथ पेज के बैकग्राउंड को तुरंत रेंडर करने में उपयोगकर्ता एजेंट की मदद करने के लिए, <meta name="color-scheme">
एलिमेंट में color-scheme
वैल्यू भी दी जा सकती है.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
color-scheme
और prefers-color-scheme
को जोड़ा जा रहा है
मेटा टैग और सीएसएस प्रॉपर्टी (अगर :root
एलिमेंट पर लागू किया गया हो) दोनों की वजह से एक जैसा ही व्यवहार होता है. इसलिए, मेरा सुझाव है कि आप हमेशा मेटा टैग के ज़रिए कलर स्कीम बताएं, ताकि ब्राउज़र अपनी पसंद की स्कीम को तेज़ी से अपना सके.
हालांकि, सटीक बेसलाइन पेजों के लिए किसी अतिरिक्त सीएसएस नियम की ज़रूरत नहीं होती है. सामान्य मामले में, आपको color-scheme
को हमेशा prefers-color-scheme
के साथ जोड़ना चाहिए.
उदाहरण के लिए, क्लासिक लिंक नीले rgb(0,0,238)
के लिए WebKit और Chrome, मालिकाना हक वाला WebKit CSS रंग -webkit-link
का कंट्रास्ट रेशियो कम है. काले बैकग्राउंड पर यह 2.23:1 काफ़ी नहीं है. साथ ही, डब्ल्यूसीएजी और एएए ज़रूरी शर्तें पूरी नहीं हो पा रही हैं.
मैंने Chrome, WebKit, और Firefox के लिए गड़बड़ियां खोली हैं. इसके अलावा, HTML Standard में मेटा से जुड़ी एक समस्या भी बताई है, ताकि इसे ठीक किया जा सके.
prefers-color-scheme
के साथ इंटरप्ले
color-scheme
सीएसएस प्रॉपर्टी और prefers-color-scheme
की उपयोगकर्ता की पसंद की मीडिया सुविधा के साथ इससे जुड़े मेटा टैग का इंटरैक्शन, पहली बार में भ्रम की स्थिति पैदा करने वाला लग सकता है.
बल्कि, वे दोनों बहुत बढ़िया तरीके से एक साथ काम करते हैं.
यह समझने की सबसे अहम बात यह है कि color-scheme
खास तौर पर डिफ़ॉल्ट तौर पर दिखने का तरीका तय करता है और
prefers-color-scheme
, बेहतर लुक के बारे में बताता है.
इसे साफ़ तौर पर समझने के लिए, नीचे दिए गए पेज पर जाएं:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
पेज पर मौजूद इनलाइन सीएसएस कोड, सामान्य मामले में <fieldset>
एलिमेंट के background-color
को gainsboro
पर सेट करता है. अगर उपयोगकर्ता prefers-color-scheme
उपयोगकर्ता की पसंद की मीडिया सुविधा के मुताबिक dark
कलर स्कीम पसंद करता है, तो darkslategray
पर सेट करें.
<meta name="color-scheme" content="dark light">
एलिमेंट की मदद से,
पेज से ब्राउज़र को पता चलता है कि
उस पर गहरे और हल्के रंग वाली थीम काम करती है.
साथ ही, गहरे रंग वाली थीम को प्राथमिकता दी जाती है.
ऑपरेटिंग सिस्टम गहरे रंग वाले मोड पर सेट है या हल्के रंग वाले मोड पर, उपयोगकर्ता एजेंट की स्टाइलशीट के आधार पर पूरा पेज गहरे रंग में दिखता है या हल्के रंग में पूरा पेज हल्के रंग में दिखता है, तो पूरा पेज हल्के रंग में दिखेगा. पैराग्राफ़ के टेक्स्ट या पेज के बैकग्राउंड का रंग बदलने के लिए, डेवलपर की ओर से उपलब्ध कराया गया कोई अतिरिक्त सीएसएस शामिल नहीं है.
ध्यान दें कि गहरे रंग वाला मोड चालू है या नहीं, इसके आधार पर <fieldset>
एलिमेंट का background-color
बदल जाता है. ऐसा पेज पर डेवलपर की दी गई इनलाइन स्टाइलशीट में बताए गए नियमों के मुताबिक किया जाता है.
यह gainsboro
या darkslategray
है.
<button>
एलिमेंट कैसा दिखेगा, यह उपयोगकर्ता एजेंट की स्टाइलशीट से कंट्रोल किया जाता है.
इसका color
, सिस्टम के रंग ButtonText
पर सेट है. साथ ही, इसके background-color
और चार border-color
सिस्टम के रंग ButtonFace
पर सेट है.
अब ध्यान दें कि <button>
एलिमेंट के border-color
में बदलाव कैसे होता है.
border-top-color
और border-bottom-color
के लिए कंप्यूट किया गया वैल्यू, rgba(0, 0, 0, 0.847)
(ब्लैकिश) से rgba(255, 255, 255, 0.847)
(सफ़ेद) में बदल जाती है. इसकी वजह यह है कि उपयोगकर्ता एजेंट, ButtonFace
को कलर स्कीम के आधार पर डाइनैमिक तौर पर अपडेट करता है.
यही बात <button>
एलिमेंट के color
पर भी लागू होती है, जो सिस्टम से जुड़े रंग ButtonText
पर सेट होता है.
डेमो
glitch के डेमो में, कई एचटीएमएल एलिमेंट पर लागू किए गए color-scheme
के असर को देखा जा सकता है.
डेमो में जान-बूझकर डब्लूसीएजी एए और डब्ल्यूसीएजी का एएए उल्लंघन दिखाया गया है, जिसमें ऊपर दी गई चेतावनी में लिंक के रंगों के बारे में बताया गया है.
स्वीकार की गई
color-scheme
सीएसएस प्रॉपर्टी और इससे जुड़े मेटा टैग को Rune Lillesveen ने लागू किया था.
Rune, सीएसएस के रंग में बदलाव करने वाले मॉड्यूल लेवल 1 की खास जानकारी का को-एडिटर भी है.
Unस्प्लैश पर
फ़िलिप लियॉन ने हीरो इमेज दी.