सिस्टम के रंग, इस्तेमाल की गई मौजूदा 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
के साथ इस्तेमाल किया जा सकता है.
सीएसएस में, इनका इस्तेमाल इस तरह किया जाता है:
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()
को धन्यवाद, इस कोड को आसान बनाया जा सकता है. :root
को color-scheme
को 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
पर लागू किया गया है.