डार्क और लाइट मोड स्विचर तेजी से लोकप्रिय हो गए हैं, जो उपयोगकर्ताओं को अपना पसंदीदा दृश्य अनुभव चुनने की सुविधा प्रदान करते हैं। चाहे आंखों का तनाव कम करना हो, बैटरी जीवन बचाना हो, या बस व्यक्तिगत पसंद का पालन करना हो, डार्क/लाइट मोड स्विचर लागू करने से उपयोगकर्ता अनुभव में उल्लेखनीय वृद्धि हो सकती है। इस लेख में, हम HTML, CSS और जावास्क्रिप्ट का उपयोग करके एक सरल लेकिन प्रभावी डार्क/लाइट मोड स्विचर बनाने में आपका मार्गदर्शन करेंगे।

डार्क/लाइट मोड क्यों लागू करें?

1. उपयोगकर्ता प्राथमिकता: कुछ उपयोगकर्ता सौंदर्यशास्त्र या आंखों के तनाव को कम करने के लिए डार्क मोड पसंद करते हैं, खासकर कम रोशनी वाले वातावरण में।

2. अभिगम्यता: एक ऐसी थीम की पेशकश करके पहुंच में सुधार करना जो दृष्टिबाधित उपयोगकर्ताओं की मदद कर सके।

3. बैटरी बचत: OLED स्क्रीन पर, डार्क मोड बैटरी जीवन बचा सकता है।

HTML संरचना की स्थापना

एक सरल HTML संरचना बनाकर प्रारंभ करें। हमें अंधेरे और प्रकाश मोड के बीच टॉगल करने के लिए एक बटन की आवश्यकता होगी।

    
    
    
    


    

        
Dark/Light Mode Switcher
        Switch to Dark Mode
        
Toggle the button to switch between dark and light modes.
    
    

सीएसएस के साथ स्टाइलिंग

इसके बाद, हम डार्क और लाइट दोनों मोड के लिए अपनी शैलियों को परिभाषित करेंगे। थीम स्विच करना आसान बनाने के लिए हम CSS वेरिएबल्स का उपयोग करेंगे।

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

जावास्क्रिप्ट कार्यक्षमता जोड़ना

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

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

स्पष्टीकरण

1. सीएसएस वेरिएबल्स: हम दोनों मोड के लिए रंगों को परिभाषित करने के लिए सीएसएस वेरिएबल्स का उपयोग करते हैं, जिससे उनके बीच स्विच करना आसान हो जाता है।

2. जावास्क्रिप्ट: हम बॉडी एलिमेंट पर डार्क-मोड क्लास को टॉगल करने के लिए बटन में एक इवेंट श्रोता जोड़ते हैं। हम मौजूदा मोड के आधार पर बटन टेक्स्ट को भी अपडेट करते हैं और मोड को लोकलस्टोरेज में सेव करते हैं।

3. स्थायी थीम: जब पेज लोड होता है, तो हम उपयोगकर्ता की पसंद के लिए लोकलस्टोरेज की जांच करते हैं और उचित थीम लागू करते हैं।

निष्कर्ष

डार्क/लाइट मोड स्विचर को लागू करना विभिन्न प्राथमिकताओं और स्थितियों को पूरा करने वाले दृश्य विकल्प प्रदान करके उपयोगकर्ता अनुभव को बढ़ाता है। HTML, CSS और JavaScript की केवल कुछ पंक्तियों के साथ, आप इस मूल्यवान सुविधा को अपने वेब प्रोजेक्ट में जोड़ सकते हैं।

अधिक उन्नत सुविधाओं, जैसे सहज बदलाव या अतिरिक्त थीम के साथ प्रयोग करने के लिए स्वतंत्र महसूस करें। संभावनाएं अनंत हैं, और आपके उपयोगकर्ता अतिरिक्त लचीलेपन की सराहना करेंगे।

हैप्पी कोडिंग!