परिचय

डार्क मोड एक डिस्प्ले सेटिंग है जो हल्के टेक्स्ट और तत्वों के साथ डार्क बैकग्राउंड का उपयोग करता है। इसने लोकप्रियता हासिल की है क्योंकि यह अच्छा दिखता है और कई व्यावहारिक लाभ प्रदान करता है।

डार्क मोड के लाभों में शामिल हैं:

1. आंखों का तनाव कम: डार्क मोड आंखों के लिए आसान हो सकता है, खासकर कम रोशनी वाले वातावरण में, क्योंकि यह स्क्रीन से निकलने वाली तेज रोशनी की मात्रा को कम कर देता है।
2. OLED स्क्रीन पर बेहतर बैटरी जीवन: OLED (ऑर्गेनिक लाइट एमिटिंग डायोड) स्क्रीन पर, डार्क मोड बैटरी जीवन बचा सकता है क्योंकि काले पिक्सेल अनिवार्य रूप से बंद होते हैं, जो चमकीले रंग प्रदर्शित करने की तुलना में कम बिजली की खपत करते हैं।

इस ट्यूटोरियल में, हम सीएसएस और जावास्क्रिप्ट का उपयोग करके अपनी वेबसाइट को डार्क मोड में स्विच करने का तरीका बताएंगे। हम एक साधारण लाइट-थीम वाले वेब पेज टेम्पलेट के साथ शुरुआत करेंगे और इसे टॉगल करने योग्य लाइट/डार्क मोड वाली एक वेबसाइट में बदल देंगे, जिससे उपयोगकर्ता लाइट और डार्क थीम के बीच आसानी से स्विच कर सकेंगे।

परियोजना की स्थापना

आइए एक सरल प्रकाश-थीम वाले वेब पेज टेम्पलेट से शुरुआत करें। फिर, हम इसे टॉगल करने योग्य लाइट/डार्क मोड वाली एक वेबसाइट में बदल देंगे, जिससे उपयोगकर्ता लाइट और डार्क थीम के बीच स्विच कर सकेंगे।

डार्क मोड शैलियाँ लागू करना

रंगों का चयन

पहला कदम उन सभी रंगों को सूचीबद्ध करना है जिनका हम उपयोग कर रहे हैं और प्रत्येक के लिए एक डार्क-थीम संस्करण चुनें। नीचे दी गई तालिका में, मैंने पृष्ठ के सभी रंगों और उनके संबंधित गहरे संस्करणों को सूचीबद्ध किया है।

कस्टम चर

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

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

आप सीएसएस कस्टम गुणों का उपयोग में सीएसएस चर के बारे में पढ़ सकते हैं। अनिवार्य रूप से, वे दो डैश (--) का उपयोग करके परिभाषित इकाइयाँ हैं जो किसी दस्तावेज़ में पुन: उपयोग के लिए मूल्यों को संग्रहीत करती हैं। सीएसएस वैरिएबल परिवर्तनों को स्वचालित रूप से अपडेट करने की अनुमति देकर रखरखाव को आसान बनाते हैं।

गतिशील तत्व रंग

हम सीएसएस वेरिएबल्स के मान डालने के लिए var() सीएसएस फ़ंक्शन का उपयोग करते हैं। इस तरह, हम प्रत्येक दस्तावेज़ को मैन्युअल रूप से बदलने के बजाय, पूरे दस्तावेज़ में परिवर्तनों को प्रतिबिंबित करने के लिए गतिशील रूप से रंग बदल सकते हैं और एक वेरिएबल को अपडेट कर सकते हैं।

यहां नौसेना तत्व और उसके बच्चों का एक उदाहरण दिया गया है:

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

जावास्क्रिप्ट के साथ लाइट/डार्क मोड टॉगल करें

अब हम थीम बदलने के लिए बॉडी के वर्ग को गहरे या हल्के रंग में बदल सकते हैं। सबसे पहले, हेडर में एक बटन जोड़ें और इसके क्लिक इवेंट के लिए चेंजथीम() फ़ंक्शन सेट करें:

चेंजथीम() फ़ंक्शन को परिभाषित करें जो बॉडी के वर्ग को टॉगल करता है:

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

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

आप नीचे दिए गए कोडपेन में ट्यूटोरियल का कोड देख सकते हैं

अगले कदम

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

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

रंग-योजना जोड़ना: गहरा; डार्क थीम में संपत्ति यह भी सुनिश्चित कर सकती है कि कुछ तत्व, जिन्हें स्टाइल करना अन्यथा कठिन है, उनकी शैली ब्राउज़र द्वारा बदल दी जाएगी।

body.dark {
  color-scheme: dark;
}

निष्कर्ष

निष्कर्ष रूप में, अपनी वेबसाइट में डार्क मोड जोड़ने से आंखों के तनाव को कम करके और OLED स्क्रीन पर बैटरी जीवन को बढ़ाकर उपयोगकर्ता अनुभव में सुधार हो सकता है। इस गाइड का पालन करके, आप सीएसएस और जावास्क्रिप्ट का उपयोग करके आसानी से लाइट/डार्क मोड टॉगल सेट कर सकते हैं। अपने डिज़ाइन के अनुरूप डार्क मोड को कस्टमाइज़ करें।

अपने कार्यान्वयन साझा करें या नीचे टिप्पणी में प्रश्न पूछें।