लाइट-डार्क() के साथ सीएसएस कलर-स्कीम पर निर्भर रंग

सिस्टम के कलर, इस्तेमाल की जा रही मौजूदा color-scheme वैल्यू के हिसाब से बदल सकते हैं. light-dark() फ़ंक्शन, लेखकों को भी यही सुविधा देता है.

Bramus

सीएसएस में सिस्टम कलर

सीएसएस में, कई कलर स्पेस में से किसी एक में मौजूद कई रंगों का इस्तेमाल किया जा सकता है. उदाहरण के लिए, नाम वाले रंगों, हेक्स रंगों, किसी खास कलर स्पेस से जुड़े कलर फ़ंक्शन, और ज़्यादा सामान्य color() फ़ंक्शन का इस्तेमाल किया जा सकता है.

उदाहरण के लिए, नाम वाले रंग cornflowerblue को #6495ED, hsl(218.54deg 79.19% 66.08%) या color(display-p3 0.43 0.58 0.9) के तौर पर भी दिखाया जा सकता है.

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

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

सीएसएस में, इनका इस्तेमाल इस तरह किया जाता है:

body {
  color: CanvasText;
  background-color: Canvas;
}

डिफ़ॉल्ट रूप से, CanvasText से black जैसा रंग मिलता है और Canvas से white जैसा रंग मिलता है. इसे लागू करने का तरीका, ब्राउज़र पर निर्भर करता है. उदाहरण के लिए, Chrome में CanvasText का रंग #121212 होता है, जबकि Safari में यह थोड़ा हल्का #1e1e1e होता है.

इन सिस्टम कलर की एक खास बात यह है कि ये color-scheme प्रॉपर्टी की कैलकुलेट की गई वैल्यू के हिसाब से काम कर सकते हैं. उदाहरण के लिए, अगर इस्तेमाल किए गए color-scheme की वैल्यू dark है, तो CanvasText और Canvas की वैल्यू बदल जाती हैं.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

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

• light dark पर सेट होने पर, इससे पता चलता है कि एलिमेंट, हल्के और गहरे रंग वाले मोड, दोनों में काम करता है. prefers-color-scheme मीडिया की स्थिति एट्रिब्यूट की वैल्यू के आधार पर यह तय होता है कि किस वैल्यू का इस्तेमाल किया जाए.
• light पर सेट होने पर, यह पता चलता है कि एलिमेंट हल्की कलर स्कीम के साथ काम करता है.
• dark पर सेट होने पर, इससे पता चलता है कि एलिमेंट, गहरे रंग की थीम के साथ काम करता है.

पेश है light-dark()

अब तक, इस्तेमाल की गई color-scheme वैल्यू पर प्रतिक्रिया देने की सुविधा, सिस्टम के रंगों के लिए ही उपलब्ध थी. सीएसएस कलर मॉड्यूल लेवल 5 में बताए गए light-dark() की मदद से, अब आपके पास भी यह सुविधा है.

light-dark() एक फ़ंक्शन है, जिसमें दो आर्ग्युमेंट इस्तेमाल किए जाते हैं. दोनों आर्ग्युमेंट <color> होने चाहिए. इस्तेमाल की गई कलर स्कीम के आधार पर, इनमें से किसी एक को चुना जाता है.

• अगर इस्तेमाल की गई कलर स्कीम light या अज्ञात है, तो पहली वैल्यू की कैलकुलेट की गई वैल्यू दिखती है.
• अगर इस्तेमाल की गई कलर स्कीम dark है, तो दूसरे रंग की कैलकुलेट की गई वैल्यू दिखती है.

light-dark() का नतीजा <color> है. इसका इस्तेमाल सीएसएस में उन सभी जगहों पर किया जा सकता है जहां <color> स्वीकार किया जाता है. उदाहरण के लिए, color और background-color प्रॉपर्टी में, लेकिन linear-gradient() जैसे फ़ंक्शन में भी.

नीचे दिए गए उदाहरण में, डार्क मोड में #333 या लाइट मोड (या किसी अनजान मोड) में #ccc बैकग्राउंड-रंग का इस्तेमाल किया गया है.

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

ध्यान दें कि light-dark() के सही तरीके से काम करने के लिए, आपको color-scheme की जानकारी देनी होगी. यह प्रॉपर्टी इनहेरिट करती है, इसलिए आम तौर पर इसे :root पर सेट किया जाता है. हालांकि, अगर आप चाहें, तो इसे किसी खास एलिमेंट पर सेट किया जा सकता है.

व्यावहारिक तौर पर इस्तेमाल करना

नीचे दिए गए उदाहरण में, कुछ कस्टम प्रॉपर्टी पेज पर रंगों को दिखाती हैं. गहरे रंग वाले मोड के लिए, उन कस्टम प्रॉपर्टी की वैल्यू को prefers-color-scheme मीडिया की स्थिति में किसी दूसरी वैल्यू से बदल दिया जाता है.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

light-dark() की मदद से, इस कोड को आसान बनाया जा सकता है. color-scheme को :root पर light dark पर सेट किया गया है. इसलिए, ओएस को लाइट मोड से डार्क मोड में बदलने पर, इन रंगों की वैल्यू अपने-आप बदल जाती हैं. इसके अलावा, डार्क मोड से लाइट मोड में बदलने पर भी ऐसा होता है.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

इसके अलावा, color-scheme को dark या light पर सेट करके, डीओएम के किसी खास सबट्री को सिर्फ़ लाइट या डार्क मोड का इस्तेमाल करने के लिए मजबूर किया जा सकता है. नीचे दिए गए उदाहरण में, यह :root पर लागू किया गया है.