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
स्यूडो क्लास और -apple-system-control-background
जैसे WebKit के इंटरनल वैरिएबल के साथ-साथ WebKit के इंटरनल प्रीप्रोसेसर डायरेक्टिव #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
के साथ जोड़ना चाहिए.
उदाहरण के लिए, WebKit और Chrome, क्लासिक लिंक ब्लू rgb(0,0,238)
के लिए, मालिकाना हक वाले WebKit CSS रंग -webkit-link
का इस्तेमाल करते हैं. यह रंग, काले रंग के बैकग्राउंड पर 2.23:1 के कंट्रास्ट अनुपात के साथ काम नहीं करता. साथ ही, यह रंग WCAG AA और WCAG AAA, दोनों की ज़रूरी शर्तों को पूरा नहीं करता.
मैंने इस समस्या को ठीक करने के लिए, Chrome, WebKit, और Firefox के लिए गड़बड़ियां खोली हैं. साथ ही, एचटीएमएल स्टैंडर्ड में मेटा से जुड़ी समस्या के बारे में भी बताया है.
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
के असर देखे जा सकते हैं.
डेमो में, ऊपर दी गई चेतावनी में बताए गए लिंक के रंगों के साथ, WCAG AA और WCAG AAA के जान-बूझकर उल्लंघन दिखाया गया है.
आभार
color-scheme
सीएसएस प्रॉपर्टी और उससे जुड़े मेटा टैग को Rune Lillesveen ने लागू किया था.
रून, सीएसएस कलर अडजस्टमेंट मॉड्यूल लेवल 1 स्पेसिफ़िकेशन के को-एडिटर भी हैं.
Unsplash पर, Philippe Leone की हीरो इमेज.