ठीक है.. इसमें थोड़ा सीएसएस शामिल है?, लेकिन यह उन उत्तरों की तुलना में बहुत आसान था जो मुझे इंटरनेट पर मिले।

मैं क्या हासिल करने की कोशिश कर रहा हूं?
मैं इस पद्धति से दो चीजें हासिल करने की कोशिश कर रहा हूं।

1. मुझे वेबसाइट को उपयोगकर्ता की पसंद के अनुसार लोड करने की अनुमति देनी होगी (वह हिस्सा जहां उन्होंने पहले से ही ओएस में अपनी थीम चुनी है)
2. लेकिन मैं उन्हें लोडिंग के बाद डार्क और लाइट मोड के बीच टॉगल करने की अनुमति भी देना चाहता हूं।

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

चरण 1: टॉगल करने के लिए बटन बनाएं

मैं अपने बटन के रूप में एक छवि का उपयोग कर रहा हूं जिसमें चंद्रमा की एक एसवीजी छवि है। आप अपना बटन या चेकबॉक्स जोड़ सकते हैं जो दो विकल्पों के बीच टॉगल करना आपके लिए ठीक लगे।

चरण 2: अपने रंग विवरण को सीएसएस में कस्टम गुणों के रूप में डालें

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

ठीक है.. तो मूल में आप कलर-स्कीम नामक संपत्ति देख रहे हैं और यह हमारा गेम चेंजर बनने जा रहा है।
जैसा कि आप देख सकते हैं, यह हल्के या गहरे रंग का मान लेता है। मैंने दो वर्ग भी बनाए हैं .लाइट और .डार्क जो रंग-योजना का मान डार्क या लाइट पर सेट करते हैं।

चरण 3: अपने कोड के विभिन्न भागों में रंग जोड़ें

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

अब जब भी कोई संपत्ति रंग (जैसे पृष्ठभूमि, रंग गुण) मांगती है, तो आप लाइट-डार्क() नामक फ़ंक्शन का उपयोग कर सकते हैं।
यह फ़ंक्शन दो मान लेता है, पहले का उपयोग तब किया जाता है जब रंग-स्कीम को प्रकाश पर सेट किया जाता है और दूसरे का उपयोग तब किया जाता है जब रंग-स्कीम को अंधेरे पर सेट किया जाता है।

हां... यह एक फीचर है जो मई 2024 में रिलीज होगा। यह काफी नया है, लेकिन इसे जल्द ही रूपांतरित किया जाएगा। और यह लेख लिखने तक यह आधारभूत समर्थन में है। यहां इसके लिए दस्तावेज़ हैं

लाइट-डार्क() - सीएसएस: कैस्केडिंग स्टाइल शीट्स | एमडीएन

लाइट-डार्क() सीएसएस फ़ंक्शन किसी प्रॉपर्टी के लिए दो रंग सेट करने में सक्षम बनाता है - यह पता लगाकर दो रंग विकल्पों में से एक को लौटाता है कि क्या डेवलपर ने हल्का या गहरा रंग योजना सेट की है या उपयोगकर्ता ने हल्के या गहरे रंग की थीम का अनुरोध किया है - पसंदीदा-रंग-योजना मीडिया सुविधा क्वेरी के भीतर थीम रंगों को शामिल करने की आवश्यकता के बिना। उपयोगकर्ता अपने ऑपरेटिंग सिस्टम सेटिंग्स (उदाहरण के लिए लाइट या डार्क मोड) या अपने उपयोगकर्ता एजेंट सेटिंग्स के माध्यम से अपनी रंग-योजना प्राथमिकता को इंगित करने में सक्षम हैं। लाइट-डार्क() फ़ंक्शन दो रंग मान प्रदान करने में सक्षम बनाता है जहां कोई भी मान स्वीकार किया जाता है। यदि उपयोगकर्ता की प्राथमिकता प्रकाश पर सेट है या कोई प्राथमिकता सेट नहीं है तो लाइट-डार्क () सीएसएस रंग फ़ंक्शन पहला मान लौटाता है और यदि उपयोगकर्ता की प्राथमिकता अंधेरे पर सेट है तो दूसरा मान लौटाता है।

डेवलपर.mozilla.org

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

चरण 4: अंधेरे और प्रकाश मोड के बीच टॉगल करने के लिए जावास्क्रिप्ट का उपयोग करें

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

यहाँ, document.documentElement.style.colorScheme वास्तव में CSS से :root तत्व को संदर्भित करता है।
जैसा कि हमने पिछले चरण में वेबसाइट को उपयोगकर्ता पसंदीदा मोड में खोलने का लक्ष्य पहले ही हासिल कर लिया है, यहां जब टॉगल बटन पर क्लिक किया जाता है तो यह निम्नलिखित कार्य करता है।

1. यह जाँचता है कि क्या रंग-योजना का कोई मूल्य है, यदि नहीं, तो वेबसाइट उपयोगकर्ता पसंदीदा मोड में है, हमें यह पहचानने की ज़रूरत है कि मोड बदलने के लिए यह गहरा है या हल्का।
2. यह window.matchMedia('(prefers-color-scheme:dark)') का उपयोग करता है। यह पता लगाने के लिए मिलान करता है कि क्या यह डार्क मोड में है, यदि यह डार्क मोड में है, तो हम रंग-स्कीम को प्रकाश में बदलते हैं, यदि ऐसा नहीं है , हम इसे अंधेरे में बदलते हैं।
3. अगली बार जब वे बटन क्लिक करते हैं, तो हम पहले से ही अपनी रंग-योजना के लिए मान निर्धारित कर देते हैं, इसलिए हम केवल अंधेरे या प्रकाश के बीच टॉगल करते हैं।

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