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

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 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स्प्लैश पर फ़िलिप लियॉन ने हीरो इमेज दी.