परिचय

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

डार्क मोड डिटेक्शन को समझना

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

यह कैसे काम करता है

मैचमीडिया एपीआई

window.matchMedia विधि मीडिया प्रश्नों का मूल्यांकन करने और उपयोगकर्ता की प्राथमिकताओं के आधार पर आपकी साइट की उपस्थिति को अनुकूलित करने का एक तरीका प्रदान करती है। यह जांचने के लिए कि क्या डार्क मोड सक्षम है, आप निम्नलिखित जावास्क्रिप्ट फ़ंक्शन का उपयोग कर सकते हैं:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

व्यावहारिक कार्यान्वयन

index.html

    
Hello, World!

    
    

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

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

गिटहब पर मुझे फ़ॉलो करें अविनाश तारे