सिस्टम के कलर, इस्तेमाल की जा रही मौजूदा color-scheme
वैल्यू के हिसाब से बदल सकते हैं. light-dark()
फ़ंक्शन, लेखकों को वही क्षमता दिखाता है.
सीएसएस में सिस्टम कलर
सीएसएस में, कई कलर स्पेस में से किसी एक में मौजूद कई रंगों का इस्तेमाल किया जा सकता है. उदाहरण के लिए, नाम वाले रंगों, हेक्स रंगों, किसी खास कलर स्पेस से जुड़े कलर फ़ंक्शन, और ज़्यादा सामान्य 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
पर सेट होने पर, इससे पता चलता है कि एलिमेंट, गहरे रंग की थीम के साथ काम करता है.
color-scheme
की वैल्यू बदलने की सुविधा देता है. बदलाव करने पर, पेज का रंग, हल्के से गहरे रंग में या गहरे रंग में बदलने पर पेज का रंग बदल जाता है. हालांकि, बॉडी एलिमेंट पर टेक्स्ट में कोई बदलाव नहीं होता है.पेश है 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;
}
}
prefers-color-scheme
के ज़रिए, हल्के या गहरे रंग वाले मोड पर प्रतिक्रिया देता है.मीडिया क्वेरी का इस्तेमाल करके, सीएसएस में कलर की वैल्यू बदली जाती हैं.
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);
}
prefers-color-scheme
का इस्तेमाल करके, हल्के या गहरे रंग वाले मोड में दिखने वाला पेज.light-dark()
का इस्तेमाल करके, रंग की वैल्यू बदली जाती हैं.बोनस के तौर पर, color-scheme
को dark
या light
पर सेट करके, डीओएम के एक खास सबट्री को सिर्फ़ हल्के या गहरे रंग वाले मोड का इस्तेमाल करने के लिए मजबूर किया जा सकता है. नीचे दिए गए उदाहरण में, यह :root
पर लागू किया गया है.
prefers-color-scheme
का इस्तेमाल करके, हल्के या गहरे रंग वाले मोड में दिखने वाला पेज.light-dark()
का इस्तेमाल करके, कलर वैल्यू बदली जाती हैं.इनमें से किसी एक विकल्प का इस्तेमाल करके, हल्के या गहरे रंग वाले मोड को फ़ोर्स किया जा सकता है. ऐसा करने के लिए,
color-scheme
वैल्यू में बदलाव किया जाता है.