कॉम्पोनेंट के हिसाब से हल्के/गहरे रंग वाली थीम

आम तौर पर, color-scheme प्रॉपर्टी को रूट पर सेट किया जाता है. हालांकि, इसे अलग-अलग एलिमेंट पर भी सेट किया जा सकता है, ताकि उन्हें पेज के बाकी हिस्से से अलग कलर स्कीम में दिखाया जा सके. यह उन कॉम्पोनेंट के लिए मददगार हो सकता है जिन्हें हमेशा किसी खास कलर स्कीम में देखा जाना चाहिए. उदाहरण के लिए, हमेशा गहरे या हल्के रंग वाले मोड में.

इस्तेमाल के उदाहरणों में ये शामिल हैं:

• ऐसे एलिमेंट जो हल्के रंग वाले मोड के पेजों पर भी गहरे रंग वाले मोड में होते हैं.ऐसा पेज को आकर्षक बनाने के लिए किया जाता है. जैसे, कोड ब्लॉक, मीडिया प्लेयर, फ़ोटो गैलरी
• ऐसे सेक्शन जिनमें हल्के रंग वाले बैकग्राउंड के लिए डिज़ाइन किया गया मीडिया मौजूद है, उन्हें हल्के रंग वाले मोड पर सेट किया जा सकता है.भले ही, पेज का बाकी हिस्सा गहरे रंग वाले मोड में हो. जैसे, इमेज, वीडियो, इलस्ट्रेशन, और प्रिंट की झलक.
• ऐसे एलिमेंट जिनकी कलर स्कीम को उपयोगकर्ता-लेवल की सेटिंग से कंट्रोल किया जाता है. जैसे, कॉम्पोनेंट की झलक
• ऐसे एम्बेड जो हल्के और गहरे रंग वाले मोड, दोनों के साथ काम नहीं करते
• डिज़ाइन टूल, मैप, विज़ुअलाइज़ेशन, गेम वगैरह.

रंगों को कब बदलना चाहिए और color-scheme को कब लागू करना चाहिए?

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

आम तौर पर, अलग-अलग color-scheme का इस्तेमाल करने वाले एलिमेंट, जटिल सतहें होती हैं. ये सतहें, आसान और कम गहराई वाले कंटेनर के बजाय, अपना विज़ुअल कॉन्टेक्स्ट बनाती हैं.

किसी एलिमेंट पर अलग color-scheme का इस्तेमाल करने से पहले, खुद से ये सवाल पूछें:

• क्या ब्राउज़र के पहले से मौजूद यूज़र इंटरफ़ेस (यूआई) को उस कलर स्कीम का इस्तेमाल करना चाहिए या पेज की कलर स्कीम के हिसाब से ढल जाना चाहिए? इस यूआई को पसंद के मुताबिक नहीं बनाया जा सकता.जैसे, फ़ॉर्म कंट्रोल, स्क्रोलबार वगैरह. -> अगर पहला विकल्प सही है, तो color-scheme का इस्तेमाल न करें.
• क्या light-dark() के रंग, पेज के बाकी हिस्से की तरह दिखने चाहिए या बदलाव के आधार पर दिखने चाहिए? -> अगर पहला विकल्प सही है, तो color-scheme का इस्तेमाल न करें.
• क्या डिसेंडेंट को उस color-scheme में होना चाहिए? अगर नहीं, तो color-scheme का इस्तेमाल न करें.

बुनियादी तौर पर लागू करना

कॉम्पोनेंट के हिसाब से बदलाव करने की सुविधा का इस्तेमाल, आम तौर पर उन पेजों पर किया जाता है जो ग्लोबल color-scheme के ज़रिए कई कलर स्कीम के साथ काम करते हैं. हालांकि, ऐसा करना ज़रूरी नहीं है. पूरे पेज पर गहरे रंग वाले मोड को अच्छी तरह से लागू करने के लिए, गहरे रंग वाला मोड देखें.

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

pre, code, .dark {
  color-scheme: dark;
}

ध्यान दें कि कुछ ब्राउज़र, कॉम्पोनेंट को अपने-आप किसी दूसरी कलर स्कीम के हिसाब से अडजस्ट कर लेते हैं. सभी मामलों में तय की गई कलर स्कीम को लागू करने के लिए, only का इस्तेमाल करें. जैसे, color-scheme: dark; के बजाय color-scheme: only dark;.

बिना रंग वाली वैल्यू को अडजस्ट करना

फ़िलहाल, light-dark() सिर्फ़ रंगों के लिए काम करता है.

सबसे सही तरीके

• ज़रूरी: बिना बैकग्राउंड वाले एलिमेंट पर color-scheme सेट न करें. ऐसा करने से, अलग-अलग कलर स्कीम के बैकग्राउंड और टेक्स्ट के रंग के जोड़े मिक्स होने का खतरा रहता है. इससे टेक्स्ट को पढ़ना मुश्किल हो जाता है.
• ज़रूरी नहीं: पूरे पेज पर गहरे रंग वाले मोड के लिए, एक जैसे कलर पेयर का फिर से इस्तेमाल करना आसान होता है. हालांकि, हम इन कॉम्पोनेंट के लिए अलग-अलग कलर पेयर तय कर सकते हैं. उदाहरण के लिए, हो सकता है कि हम हल्के रंग वाले मोड के पेज में इस्तेमाल किए गए गहरे रंग वाले मोड के कॉम्पोनेंट को थोड़ा कम गहरा दिखाना चाहें. ऐसा तब किया जाता है, जब गहरे रंग वाले मोड के उसी कॉम्पोनेंट को ऐसे पेज में इस्तेमाल किया जाता है जो पूरी तरह से गहरे रंग वाले मोड में हो.

पहले से मालूम समस्याएं जिनके बारे में आपको पता होना चाहिए

ध्यान देने वाली अहम बात: light-dark() के रंगों को इनहेरिट करना

light-dark() को कंप्यूटेड वैल्यू टाइम पर रिज़ॉल्व किया जाता है. इसका मतलब है कि light-dark() रंग पर सेट की गई, इनहेरिट की गई कोई भी <color> प्रॉपर्टी, अपने डिसेंडेंट को दो रंगों में से सिर्फ़ एक रंग पास करेगी, न कि light-dark() एक्सप्रेशन को.

यहां इसके कुछ उदाहरण दिए गए हैं:

• इनहेरिट की जाने वाली पहले से मौजूद कलर प्रॉपर्टी, जैसे कि color, accent-color, fill, stroke, text-shadow, caret-color
• syntax: <color> और inherits: true के साथ रजिस्टर की गई ऐसी कस्टम प्रॉपर्टी जो इनहेरिट की जा सकती हैं
• <color> की कोई अन्य प्रॉपर्टी inherit पर सेट की गई है

इसका मतलब है कि आपको:

• डिज़ाइन टोकन (जैसे, --surface-color) को होल्ड करने के लिए बनाई गई कस्टम प्रॉपर्टी को <color> के तौर पर रजिस्टर न करें. टोकन को अपने light-dark() एक्सप्रेशन को लाइव रखना होगा, ताकि डिसेंडेंट उन्हें किसी दूसरे color-scheme के तहत फिर से रिज़ॉल्व कर सकें.
• किसी एलिमेंट पर color-scheme सेट करते समय, इनहेरिट की गई उन <color> प्रॉपर्टी की जानकारी फिर से दें जिन्हें light-dark() वैल्यू पर सेट किया गया हो. भले ही, वह वैल्यू सीधे तौर पर सेट की गई हो या डिज़ाइन टोकन के ज़रिए. भले ही, वह वैल्यू उसी डिज़ाइन टोकन के लिए हो.
• color-scheme ओवरराइड वाले एलिमेंट पर, <color> प्रॉपर्टी पर inherit का इस्तेमाल न करें. हालांकि, उनके डिसेंडेंट पर इसका इस्तेमाल किया जा सकता है.
• ज़रूर करें: उल्टे इस्तेमाल के उदाहरण के लिए, रजिस्टर की गई <color> प्रॉपर्टी का इस्तेमाल करें: जब आपको पैरंट के रिज़ॉल्व किए गए रंग का स्नैपशॉट लेना हो और उसे चाइल्ड के color-scheme में फिर से रिज़ॉल्व होने से रोकना हो. उदाहरण के लिए, पेज के बैकग्राउंड को कैप्चर करके, उसे कहीं और इस्तेमाल करना.
• अगर आपको किसी रंग को ऐनिमेट करना है, तो ऐनिमेट किए जा रहे एलिमेंट पर, @property-रजिस्टर की गई अलग <color> प्रॉपर्टी का इस्तेमाल करें. कलर इंटरपोलेशन के लिए रजिस्ट्रेशन ज़रूरी है. यह कोई डिज़ाइन टोकन नहीं है, बल्कि हर एलिमेंट के लिए ऐनिमेशन टारगेट है. इसलिए, यह ऊपर दिए गए नियम का उल्लंघन नहीं करता है.

उदाहरण:

:root {
    --accent-color: light-dark(blue, skyblue);
    --surface-color: light-dark(white, #222);
    --text-color: light-dark(#111, white);

    color-scheme: light dark;
    accent-color: var(--accent-color);
    color: var(--text-color);
}

body {
    /* --surface-color dynamically switches despite being inherited because --surface-color is not registered */
    background: var(--surface-color);
}

pre, code {
    color-scheme: dark;
    background: var(--surface-color);

    /* Without this, accent-color would be blue, not skyblue! */
    accent-color: var(--accent-color);

    /* Without this, text-color would be #111, not white! */
    color: var(--text-color);
}

कलर स्कीम का इस्तेमाल करते समय ध्यान रखने वाली बातें

• Chrome और Firefox, iframe के लिए color-scheme का पालन करते हैं: वे एम्बेड किए गए पेजों को सही कलर स्कीम में रेंडर करते हैं. साथ ही, एम्बेड किए गए पेज की prefers-color-scheme मीडिया क्वेरी में बदलाव करते हैं, ताकि एम्बेड किए गए कॉन्टेक्स्ट का color-scheme दिखे. Safari ऐसा नहीं करता है. यह iframe में भी prefers-color-scheme को सिस्टम सेटिंग के हिसाब से दिखाता है.
  • अगर आपके पास पैरंट और iframe, दोनों का कंट्रोल है, तो: पैरंट की कलर स्कीम को iframe में साफ़ तौर पर पास करें. इसके लिए, iframe बनाते समय यूआरएल पैरामीटर (?theme=dark) का इस्तेमाल करें या postMessage() का इस्तेमाल करें. इससे आपको रनटाइम के दौरान होने वाले बदलावों पर प्रतिक्रिया देने की सुविधा भी मिलती है. iframe में, prefers-color-scheme पर भरोसा करने के बजाय, उस सिग्नल से <html> (और/या :root पर color-scheme) पर एक क्लास सेट करें.
  • अगर आपके पास सिर्फ़ एम्बेड किए गए पेज का कंट्रोल है: Safari में iframe के अंदर से, एम्बेड किए गए कॉन्टेक्स्ट के color-scheme का पता लगाने का कोई भरोसेमंद तरीका नहीं है. अपने एम्बेड एपीआई पर, साफ़ तौर पर थीम पैरामीटर दिखाएं.जैसे, कोई क्वेरी स्ट्रिंग या postMessage प्रोटोकॉल. साथ ही, एम्बेड करने वाले लोगों या कंपनियों के लिए इसे दस्तावेज़ में शामिल करें.

फ़ॉलबैक रणनीतियां

कलर स्कीम के लिए फ़ॉलबैक और ब्राउज़र की सुविधा

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

पुराने ब्राउज़र में उपयोगकर्ता की प्राथमिकताओं के हिसाब से ढलने के लिए, prefers-color-scheme मीडिया क्वेरी का इस्तेमाल करें. इससे गहरे रंग वाले मोड को प्राथमिकता देने पर, अलग-अलग रंग उपलब्ध कराए जा सकते हैं.

• :root या html पर कस्टम प्रॉपर्टी स्विच करने के लिए, मीडिया क्वेरी का इस्तेमाल करें
• अलग-अलग कॉम्पोनेंट पर मीडिया क्वेरी का इस्तेमाल करने से बचें. हालांकि, अगर किसी कॉम्पोनेंट को गहरे रंग वाले मोड में, रंगों के अलावा किसी खास तरह के कस्टमाइज़ेशन की ज़रूरत है, तो मीडिया क्वेरी का इस्तेमाल किया जा सकता है.

:root {
  /* Define brand colors for each mode */
  --color-brand-light: #0056b3;
  --color-brand-dark: #00e5ff;
  --color-brand: var(--color-brand-light);

  /* MANDATORY: Fallback for browsers without light-dark support */
  @media (prefers-color-scheme: dark) {
    --color-brand: var(--color-brand-dark);
  }

  /* Ignored in older browsers */
  color-scheme: light dark;
}

button.primary {
    background-color: var(--color-brand);
}

light-dark() के लिए फ़ॉलबैक और ब्राउज़र की सुविधा

color-scheme के साथ काम करने वाले, लेकिन light-dark() के साथ काम न करने वाले ब्राउज़र के लिए, रंगों के हल्के और गहरे वर्शन को पहले कस्टम प्रॉपर्टी के तौर पर तय किया जाना चाहिए. साथ ही, prefers-color-scheme मीडिया क्वेरी का इस्तेमाल करके, संबंधित मोड के लिए रंग सेट किए जाने चाहिए. जैसे, नीचे दिए गए उदाहरण में:

:root {
  /* Define browser UI accent color for each mode */
  --brand-accent-light: #0056b3;
  --brand-accent-dark: #00e5ff;
  --accent-color: var(--brand-accent-light);

  /* MANDATORY: Fallback for browsers without light-dark support */
  @media (prefers-color-scheme: dark) {
    --accent-color: var(--brand-accent-dark);
  }

  /* OPTIONAL: use light-dark() for more control of built-in UI colors */
  @supports (color: light-dark(white, black)) {
    --accent-color: light-dark(var(--brand-accent-light), var(--brand-accent-dark));
  }

  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;

  /* Example inherited color property */
  accent-color: var(--accent-color);
}

pre, code {
  color-scheme: dark;

  /* **Mandatory**: any inherited color properties must be set again, even if to the same design tokens */
  accent-color: var(--accent-color);
}