गहरे रंग वाला मोड

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

लागू करना

1. एचटीएमएल में, इस्तेमाल की जा सकने वाली स्कीम के बारे में बताना

ज़रूरी: "फ़्लैश ऑफ़ अन-थीम्ड कॉन्टेंट" (एफ़ओयूसी) से बचने के लिए, अपने <head> में <meta> टैग डालें. इससे यह पक्का किया जा सकेगा कि ब्राउज़र को रेंडरिंग शुरू करने से पहले ही पता चल जाए कि आपने कौनसी थीम चुनी हैं. यह <meta> टैग, कैनवस का शुरुआती रंग पहले से सेट करके, FOUC से बचने में मदद करता है. हालांकि, हो सकता है कि यह सभी ब्राउज़र या लोड होने की स्थितियों में, फ़्लैश को पूरी तरह से खत्म न कर पाए.

<!-- MANDATORY: Declare support for both light and dark themes -->
<meta name="color-scheme" content="light dark">

2. सीएसएस :root या html पर पूरे पेज के लिए कलर स्कीम लागू करना

ज़रूरी: color-scheme प्रॉपर्टी को html एलिमेंट या :root स्यूडो-क्लास पर लागू करें. ब्राउज़र खास तौर पर रूट एलिमेंट को देखते हैं, ताकि पूरे व्यूपोर्ट की थीम तय की जा सके. इसमें रूट स्क्रोलबार और शुरुआती "कैनवस" बैकग्राउंड शामिल है. अगर सिर्फ़ body पर लागू किया जाता है, तो हो सकता है कि ये ग्लोबल यूज़र इंटरफ़ेस (यूआई) सरफ़ेस, हल्के रंग वाले मोड में ही रहें. ऐसा इसलिए, क्योंकि body, विंडो के रेंडरिंग कॉन्टेक्स्ट को कंट्रोल नहीं करता.

/* MANDATORY: Apply color-scheme to :root or html for viewport-wide theming */
:root {
  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;
}

3. लाइट और डार्क कलर टोकन तय करना

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

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

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

:root {
  --color-brand-light: oklch(45% 0.23 270);
  --color-brand-dark: oklch(85% 0.15 210);
  --color-brand-text-light: white;
  --color-brand-text-dark: oklch(40% 0.23 270);

  --color-brand: light-dark(var(--color-brand-light), var(--color-brand-dark));
  --color-brand-text: light-dark(var(--color-brand-text-light), var(--color-brand-text-dark));

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

button.primary {
  /* These automatically adapt to color scheme */
  background-color: var(--color-brand);
  color: var(--color-brand-text);
}

ज़रूरी नहीं: सिस्टम के कई रंग उपलब्ध हैं. ये रंग, इस्तेमाल की गई कलर स्कीम (और अन्य कलर मोड, जैसे कि फ़ोर्स किए गए रंग) के हिसाब से अपने-आप अडजस्ट हो जाते हैं. जैसे, canvas, canvastext, accentcolor (देखें कि यह काम करता है या नहीं) , buttonborder वगैरह. आम तौर पर, ये रंग बहुत सीमित होते हैं. इसलिए, इनका इस्तेमाल सिर्फ़ कुछ खास मामलों में किया जा सकता है. जैसे, जब आपको किसी डिफ़ॉल्ट ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) से पूरी तरह मैच करना हो या फ़ॉलबैक/डिफ़ॉल्ट के तौर पर इस्तेमाल करना हो.

ज़रूरी नहीं: संदर्भ के हिसाब से कलर पेयर को पसंद के मुताबिक बनाएं

सिस्टम के डिफ़ॉल्ट रंग को बदलने के बाद भी, prefers-color-scheme मीडिया क्वेरी का इस्तेमाल करके, अलग-अलग रंगों के जोड़े तय किए जा सकते हैं. ये जोड़े, पेज के आस-पास मौजूद ब्राउज़र और ओएस Chrome के रंगों को ध्यान में रखते हैं. इसके अलावा, अगर पेज को iframe के तौर पर इस्तेमाल किया जाता है, तो ये जोड़े आस-पास के पेज के रंगों को भी ध्यान में रखते हैं.

उदाहरण के लिए, जब सिस्टम की सेटिंग dark पर सेट हो, तो हल्के रंग वाली थीम का इस्तेमाल करें. इसके अलावा, जब सिस्टम की सेटिंग light पर सेट हो, तो गहरे रंग वाली थीम का इस्तेमाल करें. इससे पेज, आस-पास के यूज़र इंटरफ़ेस (यूआई) से अलग दिखेगा.

ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) को अपनी पसंद के मुताबिक बनाने की सुविधा

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

ऐक्सेंट कलर सेट करना

ब्राउज़र के कुछ यूज़र इंटरफ़ेस (यूआई) में ऐक्सेंट कलर का इस्तेमाल किया जाता है. जैसे, चुने गए चेकबॉक्स या स्लाइडर. यह डिफ़ॉल्ट रूप से ओएस की सेटिंग पर सेट होता है. हालांकि, accent-color प्रॉपर्टी का इस्तेमाल करके, इसे ऐसे रंग पर सेट किया जा सकता है जो पेज के साथ बेहतर तरीके से अलाइन हो. जैसे, पेज का ब्रैंड कलर.

html {
  accent-color: light-dark(var(--color-accent-light), var(--color-accent-dark));
}

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

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

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

स्क्रोलबार के रंग

scrollbar-color और light-dark() का एक साथ इस्तेमाल करके, स्क्रोलबार के लिए पसंद के मुताबिक रंग सेट किए जा सकते हैं. ये रंग, इस्तेमाल की गई कलर स्कीम के हिसाब से अडजस्ट हो जाते हैं.

:root {
  --color-scrollbar-track: light-dark(#eee, #222);
  --color-scrollbar-thumb: light-dark(#999, #666);
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

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

• scrollbar-color को ऐनिमेट या ट्रांज़िशन न करें. WebKit की गड़बड़ी की वजह से, scrollbar-color में बदलाव होने पर स्क्रोलबार टिमटिमाता है.
• macOS पर, scrollbar-color (स्टैंडर्ड) और ::-webkit-scrollbar (लेगसी) प्रॉपर्टी को डिफ़ॉल्ट रूप से अनदेखा कर दिया जाता है. इसकी वजह यह है कि macOS, नेटिव "ओवरले" स्क्रोलबार का इस्तेमाल करता है. आपको पसंद के मुताबिक चुने गए रंगों को scrollbar-width (जैसे, thin या auto) के साथ जोड़ना होगा, ताकि macOS उन्हें रेंडर कर सके.
• scrollbar-width लागू होने के बाद भी, macOS ओवरले स्क्रोलबार, डिफ़ॉल्ट रूप से ट्रैक (गटर) को पारदर्शी के तौर पर रेंडर करते हैं. अगर डिज़ाइन के लिए MacOS पर ट्रैक का बैकग्राउंड कलर दिखना ज़रूरी है, तो आपको स्क्रोल किए जा सकने वाले कंटेनर पर scrollbar-gutter: stable; लागू करना होगा. हालांकि, ध्यान दें कि यह उपयोगकर्ता के स्क्रोलबार पर कर्सर घुमाने के बाद ही दिखता है.
• scrollbar-gutter: stable के साथ भी, MacOS पर ट्रैक पारदर्शी हो सकता है. थंब को दिखने के लिए, ट्रैक के रंग पर निर्भर नहीं होना चाहिए.

पसंद के मुताबिक बनाने के अन्य विकल्प

ज़्यादातर ब्राउज़र यूज़र इंटरफ़ेस (यूआई), स्यूडो-एलिमेंट को एक्सपोज़ करते हैं, ताकि उनके लुक को पूरी तरह से पसंद के मुताबिक बनाया जा सके. जैसे:

• ::placeholder
• ::spelling-error
• ::grammar-error
• ::selection
• ::search-text
• ::target-text
• ::file-selector-button

इनमें से किसी पर भी light-dark() कलर का इस्तेमाल किया जा सकता है, ताकि इस्तेमाल की गई कलर स्कीम के हिसाब से कलर लागू किए जा सकें.

4. हल्के और गहरे रंग वाले मोड के लिए अलग-अलग इमेज

सीएसएस इमेज के लिए, light-dark() का इस्तेमाल करके भी इमेज की अलग-अलग वैल्यू दी जा सकती हैं.

अहम जानकारी: light-dark() में मौजूद दोनों वैल्यू एक ही तरह की होनी चाहिए. किसी इमेज के साथ रंग को नहीं जोड़ा जा सकता. अगर दोनों में से एक इमेज होनी चाहिए, तो रंग की वैल्यू को रैप करने के लिए image(<color>) का इस्तेमाल करें.

JS-based theme detection

ज़्यादातर कलर स्कीम ब्रांचिंग, सीएसएस में की जानी चाहिए. इससे बदलाव अपने-आप लागू हो जाते हैं.

matchMedia("(prefers-color-scheme: dark)").matches को पढ़ने वाले किसी भी JS को अपने change इवेंट को भी मैनेज करना चाहिए, क्योंकि सिस्टम की सेटिंग कभी भी बदल सकती है.

ज़रूरी नहीं: कलर-स्कीम टॉगल लागू करना

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

ज़रूरी नहीं: कॉम्पोनेंट के हिसाब से बदलाव करना

किसी खास एलिमेंट के लिए ग्लोबल थीम को बदला जा सकता है. इसके लिए, उस एलिमेंट पर color-scheme सेट करें.

ज़्यादा जानकारी और समस्याओं के बारे में जानने के लिए, कॉम्पोनेंट के हिसाब से गहरे/हल्के रंग वाली थीम देखें.

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

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

• 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);
}

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

इमेज के लिए light-dark() का इस्तेमाल न करने वाले ब्राउज़र के लिए, स्विच के तौर पर image-set() का इस्तेमाल करें: हर विकल्प को कस्टम प्रॉपर्टी से type() दें. साथ ही, इनऐक्टिव विकल्प को ऐसे एमआईएमई टाइप पर सेट करें जो काम न करता हो, ताकि ब्राउज़र उस विकल्प को खारिज कर दे. चालू विकल्प को खाली वैल्यू मिलती है. इसलिए, यह बिना type() वाला एक सामान्य image-set() विकल्प है.

:root पर स्विच को एक बार तय करें. इसके बाद, इस्तेमाल की जाने वाली हर साइट पर, दोनों इमेज को इनलाइन करना होगा, जैसे कि light-dark().

:root {
  --light-type: ;
  --dark-type: type("image/do-not-use");

  /* MANDATORY: Fallback for browsers without light-dark() image support */
  @media (prefers-color-scheme: dark) {
    --light-type: type("image/do-not-use");
    --dark-type: ;
  }
}

.hero {
  background-image: image-set(url(hero-light.png) var(--light-type), url(hero-dark.png) var(--dark-type));

  @supports (background-image: light-dark(url("a"), url("b"))) {
    background-image: light-dark(url(hero-light.png), url(hero-dark.png));
  }
}

• सिर्फ़ चुनी गई इमेज डाउनलोड होती है.
• समस्या हल करने के ये तरीके अब भी काम करते हैं: image-set(url(a-1x.png) 1x var(--light-type), url(a-2x.png) 2x var(--light-type), url(b-1x.png) 1x var(--dark-type), url(b-2x.png) 2x var(--dark-type)).
• चालू विकल्प के लिए, type("") का इस्तेमाल न करें. ब्राउज़र, खाली स्ट्रिंग को काम न करने वाली स्ट्रिंग मानते हैं और हर विकल्प को छोड़ देते हैं.
• light-dark() के उलट, स्विच किसी सबट्री पर सेट किए गए color-scheme का पालन नहीं करता. मैन्युअल टॉगल या color-scheme को सेट करने वाले किसी भी सबट्री को --light-type और --dark-type को भी फ़्लिप करना चाहिए.

विकल्प: हर इमेज के लिए एक कस्टम प्रॉपर्टी

यह तरीका तब आसान होता है, जब सिर्फ़ कुछ इमेज अलग-अलग हों. हालांकि, हर इमेज के लिए अपनी मीडिया क्वेरी ब्रांच की ज़रूरत होती है. साथ ही, हर इमेज को मैन्युअल तरीके से टॉगल करना पड़ता है.

:root {
  --hero-image: url(hero-light.png);

  @media (prefers-color-scheme: dark) {
    --hero-image: url(hero-dark.png);
  }

  @supports (background-image: light-dark(url("a"), url("b"))) {
    --hero-image: light-dark(url(hero-light.png), url(hero-dark.png));
  }
}

.hero {
  background-image: var(--hero-image);
}

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

एक ही कलर स्टॉप और बिना पोज़िशन वाले ग्रेडिएंट का इस्तेमाल करें. उदाहरण के लिए, linear-gradient(blue).

ज़्यादा ब्राउज़र पर काम करने के लिए, सिंगल कलर स्टॉप के लिए 0 100% पोज़िशन साफ़ तौर पर दी जा सकती हैं. उदाहरण के लिए, linear-gradient(blue 0 100%).

scrollbar-color के लिए फ़ॉलबैक और ब्राउज़र सहायता

यह सुविधा, परतदार वृद्धि है. इसके लिए, हमेशा फ़ॉलबैक की ज़रूरत नहीं होती.

अगर स्टाइलिंग ज़रूरी है और उपयोगकर्ता का Baseline टारगेट "Baseline Widely Available" या इससे पहले का है, तो आपको फ़ॉलबैक के तौर पर, स्टैंडर्ड के मुताबिक न होने वाले ::-webkit-scrollbar सूडो-एलिमेंट शामिल करने चाहिए.

लेगसी फ़ॉलबैक को @supports not (scrollbar-color: auto) ब्लॉक में रैप करें, ताकि स्टैंडर्ड प्रॉपर्टी और लेगसी WebKit सिलेक्टर के बीच टकराव को रोका जा सके. ऐसा उन ब्राउज़र में करें जो दोनों को नेटिव तौर पर सपोर्ट करते हैं.

अगर रंगों को तय करने के लिए कस्टम प्रॉपर्टी का इस्तेमाल किया जा रहा है, तो ये लेगसी WebKit सिलेक्टर पर अपने-आप लागू हो जाएंगी. आपको उन्हें डुप्लीकेट करने की ज़रूरत नहीं है.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}

accent-color के लिए फ़ॉलबैक और ब्राउज़र सहायता

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