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

1. टेलविंड में डार्क मोड कैसे काम करता है

टेलविंड डार्क वेरिएंट के माध्यम से डार्क मोड को लागू करने के लिए एक सरल दृष्टिकोण प्रदान करता है। डिफ़ॉल्ट रूप से, यह डार्क मोड के लिए उपयोगकर्ता की सिस्टम सेटिंग्स की जाँच करता है और संबंधित शैलियों को लागू करता है।

टेलविंड में डार्क मोड सेट करना:

अपनी टेलविंड.कॉन्फिग.जेएस फ़ाइल में, इसे मीडिया (सिस्टम प्राथमिकता) या क्लास (मैन्युअल टॉगल) पर सेट करके डार्क मोड सक्षम करें:

module.exports = {
  darkMode: 'media', // or 'class'
}

• मीडिया: उपयोगकर्ता की ओएस सेटिंग्स के आधार पर डार्क मोड सक्रिय करता है।
• क्लास: आपको डार्क क्लास जोड़कर मैन्युअल रूप से डार्क मोड को टॉगल करने की अनुमति देता है।

2. डार्क मोड के लिए स्टाइलिंग

एक बार डार्क मोड सक्षम हो जाने पर, आप विशेष रूप से डार्क मोड के लिए स्टाइल लागू करने के लिए डार्क वेरिएंट का उपयोग कर सकते हैं।

उदाहरण:

    This is a dark mode toggle example

• बीजी-सफ़ेद और टेक्स्ट-काला प्रकाश मोड पर लागू होते हैं।
• डार्क मोड सक्रिय होने पर डार्क: बीजी-ग्रे-800 और डार्क: टेक्स्ट-व्हाइट लागू होते हैं।

यह लचीलापन आपको अंधेरे और प्रकाश मोड के लिए अपने घटकों को अलग-अलग स्टाइल करने की अनुमति देता है।

3. टेलविंड की क्लास रणनीति के साथ डार्क मोड

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

जावास्क्रिप्ट के साथ उदाहरण:

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

इस सेटअप के साथ, बटन पर क्लिक करने से डार्क क्लास चालू हो जाएगी और लाइट और डार्क मोड के बीच स्विच हो जाएगा।

4. विशिष्ट तत्वों के लिए डार्क मोड का उपयोग करना

कभी-कभी, आप चाहते होंगे कि आपके वेबपेज के केवल विशिष्ट अनुभाग ही डार्क मोड में स्विच हो जाएं, जबकि अन्य भागों को अपरिवर्तित छोड़ दिया जाए। आप डार्क मोड कक्षाओं को कुछ कंटेनरों में लपेटकर प्रति-तत्व के आधार पर डार्क मोड स्टाइलिंग लागू कर सकते हैं।

उदाहरण:

    

        This section is in dark mode, while the outer section remains light.
    

यह विधि आपको इस पर अधिक नियंत्रण देती है कि आपके डिज़ाइन के कौन से हिस्से डार्क मोड से प्रभावित हैं।

5. डार्क मोड रंगों की सिलाई

आप रंग पैलेट का विस्तार करके अपनी टेलविंड.कॉन्फिग.जेएस फ़ाइल में डार्क मोड रंगों को भी कस्टमाइज़ कर सकते हैं।

उदाहरण:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

अब, आप इन कस्टम डार्क मोड रंगों का उपयोग इस तरह कर सकते हैं:

    Custom Dark Mode Colors

निष्कर्ष

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

लिंक्डइन पर मुझे फ़ॉलो करें- रिदॉय हसन
मेरी वेबसाइट पर जाएँ-ridoyweb.com
आगे पढ़िए-
सीएसएस लिखने के लिए सर्वोत्तम अभ्यास