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

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 स्टाइलशीट और गहरे रंग वाले मोड के बारे में जानकारी को ध्यान से देखें. (स्टाइलशीट में "dark" शब्द के लिए पूरा टेक्स्ट खोजें.) स्टाइलशीट से मिलने वाला डिफ़ॉल्ट विकल्प, इस आधार पर बदलता है कि डार्क मोड चालू है या बंद. इसे दिखाने के लिए, यहां एक ऐसा सीएसएस नियम दिया गया है जिसमें :matches स्यूडो क्लास और -apple-system-control-background जैसे WebKit-इंटरनल वैरिएबल और 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 के साथ जोड़ना चाहिए. उदाहरण के लिए, मालिकाना हक वाले WebKit सीएसएस रंग -webkit-link, जिसे WebKit और Chrome में क्लासिक लिंक नीले रंग rgb(0,0,238) के लिए इस्तेमाल किया गया है, का काली बैकग्राउंड पर उसका कंट्रास्ट अनुपात 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 के असर को देखा जा सकता है. डेमो में जान-बूझकर डब्ल्यूसीएजी एए और डब्लूसीएजी एएए का उल्लंघन दिखाया गया है. साथ ही, ऊपर चेतावनी में बताए गए लिंक के रंगों के बारे में भी बताया गया है.

स्वीकार हैं

color-scheme सीएसएस प्रॉपर्टी और इससे जुड़े मेटा टैग को Rune Lillesveen ने लागू किया. रून, सीएसएस कलर अडजस्टमेंट मॉड्यूल लेवल 1 की खास जानकारी का को-एडिटर भी है. Unsplash पर फ़िलिप लियॉन की हीरो इमेज.