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

चरण 1: HTML सेट करना

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

Toggle Dark Mode

यह बटन मोड स्विच करने के लिए ट्रिगर बनने जा रहा है।

चरण 2: लाइट और डार्क मोड के लिए सीएसएस जोड़ना

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

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

यहां क्या हो रहा है:

• लाइट मोड (डिफ़ॉल्ट): मुख्य भाग में एक सफेद पृष्ठभूमि और काला पाठ है। मैंने मोड के बीच स्विच करते समय परिवर्तन को सुचारू बनाने के लिए एक ट्रांज़िशन जोड़ा।
• डार्क मोड: .डार्क-मोड क्लास पृष्ठभूमि को गहरे भूरे रंग में और टेक्स्ट को सफेद में बदल देता है।

चरण 3: जावास्क्रिप्ट के साथ मोड के बीच स्विच करना

अब वह हिस्सा आता है जहां हम बटन को वास्तव में कुछ करते हैं। जब भी बटन क्लिक किया जाएगा तो जावास्क्रिप्ट का यह बिट बॉडी पर .डार्क-मोड क्लास को टॉगल कर देगा।

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

यहाँ एक विश्लेषण है:

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

चरण 4: पेज लोड पर उपयोगकर्ता की प्राथमिकता लोड करना

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

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

यदि आप रिएक्ट का उपयोग कर रहे हैं, तो प्रक्रिया काफी हद तक समान है, लेकिन आप अपने घटकों के भीतर चीजों को संभाल लेंगे। इसे करने का तरीका यहां बताया गया है:

1. डार्क मोड के लिए स्टेट और सीएसएस क्लास सेट करें:

डार्क मोड स्थिति को प्रबंधित करने के लिए रिएक्ट के यूज़स्टेट का उपयोग करें, और अपने रूट तत्व पर उचित क्लास लागू करें:

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

इस उदाहरण में:

• डार्कमोड स्थिति निर्धारित करती है कि डार्क मोड सक्रिय है या नहीं।
• टॉगलडार्कमोड फ़ंक्शन डार्क मोड को चालू और बंद करता है।

1. डार्क मोड के लिए सीएसएस:

पहले की तरह, अपने सीएसएस में .डार्क-मोड क्लास जोड़ें:

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. स्थानीय भंडारण:

यदि आप चाहते हैं कि थीम प्राथमिकता बनी रहे, तो आप यह छोटा सा बदलाव जोड़ सकते हैं:

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

यहां क्या हो रहा है:

• प्रारंभिक स्थिति: डार्कमोड की प्रारंभिक स्थिति लोकलस्टोरेज में संग्रहीत मूल्य के आधार पर निर्धारित की जाती है।
• इफ़ेक्ट हुक: जब भी डार्कमोड बदलता है तो यूज़इफ़ेक्ट हुक वर्तमान थीम प्राथमिकता को सहेजता है।

और बस इतना ही! चीजों को अधिक जटिल किए बिना अपने रिएक्ट ऐप में डार्क मोड जोड़ने का यह एक आसान तरीका है।