केवल CSS का उपयोग करके डार्क/लाइट या मल्टी-थीम रंग कैसे जोड़ें?

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

टीएलडीआर;

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

1- वैश्विक सीएसएस/एससीएसएस/स्टाइल-घटक/सीएसएस-इन-जेएस फ़ाइल को परिभाषित करें जो आपके वैश्विक स्टाइलिंग निर्देशों या डिज़ाइन सिस्टम को नियंत्रित और प्रस्तुत करता है।

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

2- अपनी टॉगल थीम कार्यक्षमता को नीचे की तरह संभालने के लिए थीम घटक बनाएं:

import { useState } from "react";

const Theme = () => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;

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

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

3- अपने HTML बॉडी डार्क एट्रिब्यूट के अनुसार डार्क थीम वेरिएबल्स और टार्गेट थीम जोड़ें।

अब अपने HTML बॉडी एट्रिब्यूट के आधार पर CSS चयनकर्ता को परिभाषित करें, इस मामले में चूंकि मैंने इसे "उन्हें" कहा है, मैं यहां [थीम = "डार्क"] का चयन करने जा रहा हूं और अपने चर के लिए नए रंगों को परिभाषित करूंगा।

आसान आसान है ना?

4- मल्टी थीम और वेरिएबल्स वैल्यू कैसे बदले जाते हैं?

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

मूल रूप से, यह दृष्टिकोण इस तरह काम करता है, आप अपने चर और रंगों को अपने मूल चयनकर्ता में परिभाषित करते हैं, फिर आप HTML बॉडी थीम मान को लक्षित करते हैं और उन्हीं चरों का रंग बदलते हैं जिन्हें आपने परिभाषित किया है, CSS स्वचालित रूप से आपके आवेदन के अंदर नए रंगों को बदलने जा रहा है .

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

मैंने थीम आइटम को अपने स्थानीय स्टोरेज में सेट किया है और हर बार जब मेरा ऐप हार्ड रीफ्रेश करता है या यदि मैं सत्र (टैब) बंद करता हूं और फिर से वापस आता हूं, तो मैं स्थानीय स्टोरेज से थीम डेटा पढ़ता हूं।

import { useEffect, useState } from "react";

const Theme = () => {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const currentTheme = localStorage.getItem("theme");
    if (currentTheme) {
      setTheme(currentTheme);
      document.body.setAttribute("theme", currentTheme);
    }
  }, []);

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);
      // Persist the current theme value in localStorage
      localStorage.setItem("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;