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

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

बैकग्राउंड

prefers-color-scheme उपयोगकर्ता की पसंद के हिसाब से मीडिया दिखाने की सुविधा

prefers-color-scheme उपयोगकर्ता की पसंद के हिसाब से मीडिया सुविधा की मदद से, डेवलपर को अपने पेजों के दिखने के तरीके पर पूरा कंट्रोल मिलता है. अगर आपको इसके बारे में नहीं पता है, तो कृपया मेरा लेख पढ़ें: prefers-color-scheme: Hello darkness, my old friend. इसमें मैंने डार्क मोड को बेहतर बनाने के बारे में अपनी पूरी जानकारी दी है.

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

ब्राउज़र समर्थन

prefers-color-scheme

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 67.
  • Safari: 12.1.

Source

color-scheme

Browser Support

  • Chrome: 81.
  • Edge: 81.
  • Firefox: 96.
  • Safari: 13.

Source

उपयोगकर्ता एजेंट स्टाइलशीट

आगे बढ़ने से पहले, मैं आपको उपयोगकर्ता एजेंट स्टाइलशीट के बारे में कुछ जानकारी देना चाहता हूं. ज़्यादातर मामलों में, उपयोगकर्ता एजेंट (यूए) शब्द का मतलब ब्राउज़र होता है. यूज़र एजेंट स्टाइलशीट, किसी पेज के डिफ़ॉल्ट लुक और स्टाइल को तय करती है. जैसा कि नाम से पता चलता है, UA स्टाइलशीट ऐसी चीज़ होती है जो उस UA पर निर्भर करती है जिसके बारे में सवाल पूछा गया है. Chrome (और Chromium) की यूज़र एजेंट स्टाइलशीट देखी जा सकती है. साथ ही, इसकी तुलना Firefox या Safari (और WebKit) की यूज़र एजेंट स्टाइलशीट से की जा सकती है. आम तौर पर, यूज़र एजेंट स्टाइलशीट में ज़्यादातर चीज़ों के लिए एक ही तरह की स्टाइल तय की जाती है. उदाहरण के लिए, ये सभी लिंक को नीला, सामान्य टेक्स्ट को काला, और बैकग्राउंड के रंग को सफ़ेद बनाते हैं. हालांकि, इनमें कुछ ज़रूरी (और कभी-कभी परेशान करने वाले) अंतर भी होते हैं. जैसे, ये फ़ॉर्म कंट्रोल को कैसे स्टाइल करते हैं.

WebKit की यूज़र एजेंट स्टाइलशीट और डार्क मोड के लिए इसके काम करने के तरीके के बारे में ज़्यादा जानें. (स्टाइलशीट में "dark" के लिए पूरा टेक्स्ट खोजें.) स्टाइलशीट में दिया गया डिफ़ॉल्ट रंग, डार्क मोड के चालू या बंद होने के हिसाब से बदलता है. इसे समझने के लिए, यहां :matches स्यूडो क्लास और 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-internal सिमैंटिक कलर हैं.

सीएसएस ने सिमैंटिक सिस्टम कलर को स्टैंडर्ड बना दिया है. इनकी जानकारी सीएसएस कलर मॉड्यूल लेवल 4 में दी गई है. उदाहरण के लिए, Canvas (इसे <canvas> टैग के साथ भ्रमित न करें) का इस्तेमाल, ऐप्लिकेशन के कॉन्टेंट या दस्तावेज़ों के बैकग्राउंड के लिए किया जाता है. वहीं, CanvasText का इस्तेमाल, ऐप्लिकेशन के कॉन्टेंट या दस्तावेज़ों में मौजूद टेक्स्ट के लिए किया जाता है. ये दोनों एक साथ काम करते हैं और इनका इस्तेमाल अलग-अलग नहीं किया जाना चाहिए.

यूए स्टाइलशीट, एचटीएमएल एलिमेंट को डिफ़ॉल्ट रूप से रेंडर करने का तरीका तय करने के लिए, अपने मालिकाना हक वाले या स्टैंडर्ड सिमैंटिक सिस्टम कलर का इस्तेमाल कर सकती हैं. अगर ऑपरेटिंग सिस्टम को गहरे रंग वाले मोड पर सेट किया गया है या गहरे रंग वाली थीम का इस्तेमाल किया जा रहा है, तो 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"> के ज़रिए रेफ़र किया गया हो. इसके बाद, इसे पार्स करना होगा. यूज़र एजेंट को पेज के बैकग्राउंड को तुरंत, पसंद के मुताबिक कलर स्कीम में रेंडर करने में मदद करने के लिए, color-scheme वैल्यू को <meta name="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 सीएसएस कलर -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 कलर स्कीम को चुनता है, तो background-color को darkslategray पर सेट करता है.

<meta name="color-scheme" content="dark light"> एलिमेंट के ज़रिए, पेज ब्राउज़र को बताता है कि यह गहरे और हल्के रंग वाली थीम के साथ काम करता है. साथ ही, गहरे रंग वाली थीम को प्राथमिकता देता है.

ऑपरेटिंग सिस्टम में गहरे या हल्के रंग वाला मोड सेट होने के आधार पर, पूरा पेज गहरे रंग पर हल्का या इसके उलट दिखता है. यह उपयोगकर्ता एजेंट स्टाइलशीट पर आधारित होता है. पैराग्राफ़ के टेक्स्ट या पेज के बैकग्राउंड का रंग बदलने के लिए, डेवलपर की ओर से उपलब्ध कराई गई कोई अतिरिक्त सीएसएस शामिल नहीं की गई है.

ध्यान दें कि गहरे रंग वाला मोड चालू होने पर, <fieldset> एलिमेंट का background-color कैसे बदलता है. यह बदलाव, डेवलपर की ओर से पेज पर दी गई इनलाइन स्टाइलशीट में मौजूद नियमों के मुताबिक होता है. यह gainsboro या darkslategray में से कोई एक है.

हल्के रंग वाले मोड में पेज.
लाइट मोड: डेवलपर और उपयोगकर्ता एजेंट की ओर से तय की गई स्टाइल. उपयोगकर्ता एजेंट स्टाइलशीट के मुताबिक, टेक्स्ट का रंग काला और बैकग्राउंड का रंग सफ़ेद है. इनलाइन की गई डेवलपर स्टाइलशीट के मुताबिक, <fieldset> एलिमेंट का background-color gainsboro है.
गहरे रंग वाले मोड में पेज.
गहरे रंग वाला मोड: डेवलपर और उपयोगकर्ता एजेंट की ओर से तय की गई स्टाइल. उपयोगकर्ता एजेंट की स्टाइलशीट के मुताबिक, टेक्स्ट का रंग सफ़ेद और बैकग्राउंड का रंग काला है. इनलाइन की गई डेवलपर स्टाइलशीट के मुताबिक, <fieldset> एलिमेंट का background-color darkslategray है.

<button> एलिमेंट के दिखने के तरीके को, उपयोगकर्ता एजेंट स्टाइलशीट कंट्रोल करती है. इसके color को सिस्टम के ButtonText रंग पर सेट किया गया है. साथ ही, इसके background-color और चारों border-color को सिस्टम के ButtonFace रंग पर सेट किया गया है.

लाइट मोड वाला ऐसा पेज जो ButtonFace प्रॉपर्टी का इस्तेमाल करता है.
लाइट मोड: 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 पर सेट किया गया है.

इस इमेज में दिखाया गया है कि कंप्यूट की गई रंग की वैल्यू, ButtonFace से मेल खाती हैं.
लाइट मोड: उपयोगकर्ता एजेंट स्टाइलशीट में border-top-color और border-bottom-color, दोनों को ButtonFace पर सेट किया गया है. अब इनकी कैलकुलेट की गई वैल्यू rgba(0, 0, 0, 0.847) है.
इस इमेज में दिखाया गया है कि गहरे रंग वाले मोड में भी, रंग की कैलकुलेट की गई वैल्यू अब भी ButtonFace से मेल खाती हैं.
गहरे रंग वाला मोड: उपयोगकर्ता एजेंट स्टाइलशीट में border-top-color और border-bottom-color, दोनों को ButtonFace पर सेट किया गया है. अब इनकी कैलकुलेट की गई वैल्यू rgba(255, 255, 255, 0.847) है.

डेमो

Glitch पर मौजूद डेमो में, कई एचटीएमएल एलिमेंट पर color-scheme लागू करने के असर को देखा जा सकता है. इस डेमो में, ऊपर दी गई चेतावनी में बताए गए लिंक के रंगों के साथ, WCAG AA और WCAG AAA के उल्लंघन को जानबूझकर दिखाया गया है.

हल्के रंग वाले मोड में डेमो.
डेमो को color-scheme: light पर टॉगल किया गया.
गहरे रंग वाले मोड में डेमो.
डेमो को color-scheme: dark पर टॉगल किया गया. लिंक के रंगों से जुड़ी, डब्लूसीएजी एए और डब्लूसीएजी एएए उल्लंघन के बारे में जानकारी दें.

Acknowledgements

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