सीएसएस वेरिएबल्स और जावास्क्रिप्ट के साथ डार्क मोड को कस्टमाइज़ करना

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

पता करने के लिए इसके अलावा, हम थीम सेटिंग्स को प्रबंधित करने के लिए सीएसएस वेरिएबल्स और जावास्क्रिप्ट का उपयोग कर सकते हैं। एक डार्क थीम:

:रूट { --फ़ॉन्ट-रंग: #000; ... --बीजी-रंग: आरजीबी(243,243,243); } [डेटा-थीम = "डार्क"] { --फ़ॉन्ट-रंग: #c1bfbd; ... --बीजी-रंग: #333; }

शैलियों को गतिशील रूप से समायोजित करने के लिए जहां आवश्यक हो वेरिएबल्स को कॉल करें।

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

अपने HTML के हेडर सेक्शन में, जोड़ें उपयोगकर्ता की पसंदीदा थीम का पता लगाने के लिए जावास्क्रिप्ट:

फ़ंक्शन डिटेक्टकलरस्कीम() { वर विषय = "प्रकाश"; ... } डिटेक्टकलरस्कीम();

प्रकाश और अंधेरे विषयों के बीच टॉगल करने के लिए जावास्क्रिप्ट का उपयोग करें:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

थीम टॉगलिंग के लिए HTML

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

लेबल>

इस दृष्टिकोण के साथ, आप स्वचालित रूप से उपयोगकर्ता की थीम का पता लगा सकते हैं, उन्हें इसे ओवरराइड करने की अनुमति दे सकते हैं, और ब्राउज़र और प्लेटफ़ॉर्म पर एक अनुकूलित अनुभव प्रदान कर सकते हैं।