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

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

Thomas Steiner

बैकग्राउंड

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

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

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

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

prefers-color-scheme

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 76
• 79
• 67
• 12.1

सोर्स

color-scheme

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 81
• 81
• 96
• 13

सोर्स

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

जारी रखने से पहले, मैं आपको कम शब्दों में बता दूँ कि उपयोगकर्ता एजेंट की स्टाइलशीट क्या होती है. ज़्यादातर समय, आप उपयोगकर्ता एजेंट (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 इसके उलट, गहरे बैकग्राउंड रंग और हल्के फ़ोरग्राउंड रंग वाली कलर स्कीम दिखाता है.

सभी एलिमेंट के लिए, कलर स्कीम के साथ रेंडर करने पर ब्राउज़र के दिए गए सभी यूज़र इंटरफ़ेस (यूआई) में इस्तेमाल किए गए कलर, एलिमेंट के लिए कलर स्कीम के इंटेंट से मैच होने चाहिए. उदाहरण के लिए, स्क्रोल बार, वर्तनी जांच के लिए अंडरलाइन, फ़ॉर्म कंट्रोल वगैरह.

ध्यान दें: color-scheme सीएसएस प्रॉपर्टी का इस्तेमाल, :root लेवल के साथ-साथ हर एलिमेंट के लेवल पर भी किया जा सकता है.

: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 है.

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

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

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

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

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

डेमो

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

डेमो को color-scheme: light पर टॉगल किया गया.

डेमो को color-scheme: dark पर टॉगल किया गया. लिंक के रंगों से, WCAG AA और WCAG AAA के उल्लंघन के बारे में जानें.

धन्यवाद

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