इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

ऐसा पेज जिस पर color-scheme की वैल्यू बदली जा सकती है. बदलाव करने पर, पेज के रंग हल्के से गहरे या गहरे से हल्के में बदल जाते हैं. भले ही, बॉडी एलिमेंट पर मौजूद एलान एक जैसे ही रहते हैं.

पेश है `light-dark()`

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

सोर्स

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

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 वैल्यू में बदलाव किया जाता है.

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

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

पेश है light-dark()

प्रैक्टिकल ऐप्लिकेशन

पेश है `light-dark()`