Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

सिस्टम के रंग, इस्तेमाल की जा रही मौजूदा 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()`

Browser Support

Source

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

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

पेश है light-dark()

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

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