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

सिस्टम के रंग, इस्तेमाल की गई मौजूदा 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 के साथ इस्तेमाल किया जा सकता है.

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

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()

ब्राउज़र सहायता

• 123
• x
• 120
• x

सोर्स

अब तक, इस्तेमाल की गई 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() को धन्यवाद, इस कोड को आसान बनाया जा सकता है. :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);
}

ऐसा पेज जो prefers-color-scheme का इस्तेमाल करके हल्के या गहरे रंग वाले मोड में काम करता है.
रंग की वैल्यू light-dark() का इस्तेमाल करके बदल दी जाती हैं.

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

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