मूल रंग-योजना सेटिंग को ओवरराइड करना

विभिन्न ऑपरेटिंग सिस्टमों में व्यापक रूप से अपनाने के साथ डार्क मोड को लागू करना महत्वपूर्ण हो गया है। जबकि मूल ब्राउज़र समर्थन सीएसएस मीडिया नियम @मीडिया (पसंद-रंग-योजना: डार्क) के माध्यम से मौजूद है, यह उपयोगकर्ता की प्राथमिकताओं को पूरी तरह से संबोधित नहीं कर सकता है या माइक्रोसॉफ्ट एज जैसे असमर्थित ब्राउज़र को पूरा नहीं कर सकता है।

डिकॉप्लिंग सिस्टम सेटिंग्स वेबसाइट थीम से

इष्टतम उपयोगकर्ता नियंत्रण प्रदान करने के लिए, उपयोगकर्ताओं को सिस्टम की रंग-स्कीम सेटिंग को ओवरराइड करने की अनुमति देना महत्वपूर्ण है। यह सुनिश्चित करता है कि वे किसी विशिष्ट वेबसाइट के लिए अपनी पसंदीदा थीम चुन सकते हैं। इसे प्राप्त करने के लिए, सीएसएस वेरिएबल्स और जावास्क्रिप्ट के संयोजन का उपयोग किया जाता है। :जड़ { --फ़ॉन्ट-रंग: #000; --लिंक-रंग: #1सी75बी9; --लिंक-सफ़ेद-रंग: #fff; --बीजी-रंग: आरजीबी(243,243,243); } [डेटा-थीम = "डार्क"] { --फ़ॉन्ट-रंग: #c1bfbd; --लिंक-रंग: #0a86da; --लिंक-सफ़ेद-रंग: #c1bfbd; --बीजी-रंग: #333; }

लचीलापन सुनिश्चित करने के लिए संपूर्ण स्टाइलशीट में वेरिएबल का उपयोग किया जाता है:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}