कलर-स्कीम सीएसएस प्रॉपर्टी और उससे जुड़े मेटा टैग के साथ बेहतर गहरे रंग वाले मोड की डिफ़ॉल्ट स्टाइल

color-scheme सीएसएस प्रॉपर्टी और उससे जुड़े मेटा टैग की मदद से, डेवलपर अपने पेजों को उपयोगकर्ता एजेंट स्टाइलशीट की थीम के हिसाब से डिफ़ॉल्ट तौर पर सेट कर सकते हैं.

Thomas Steiner

बैकग्राउंड

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 की हीरो इमेज.