एप्लिकेशन के लिए एक सेटिंग होना लोकप्रिय हो गया है जो आपको डार्क और लाइट मोड के बीच टॉगल करने देता है। हो सकता है कि यह डार्क UI की लोकप्रियता के कारण हो, शायद ऐसा इसलिए है क्योंकि ऐप्स धीरे-धीरे अधिक कॉन्फ़िगर करने योग्य होते जा रहे हैं।

प्रतिक्रिया संदर्भ वैश्विक स्तर पर डेटा साझा करने का एक आसान तरीका है, लेकिन यह घटक पुन: उपयोग को और अधिक कठिन बना सकता है। एक विकल्प के रूप में, आप एक डार्क मोड बटन घटक बना सकते हैं जो संदर्भ के बजाय useEffect और useState हुक का उपयोग करता है। यह बॉडी एलिमेंट पर डेटा एट्रिब्यूट को टॉगल करेगा जिसे CSS स्टाइल्स टारगेट कर सकते हैं।

आपको किस चीज़ की ज़रूरत पड़ेगी

इस ट्यूटोरियल का अनुसरण करने के लिए, आपको निम्नलिखित की आवश्यकता होगी:

  • आपकी मशीन पर Node का नवीनतम संस्करण स्थापित किया गया है।
  • प्रतिक्रिया की एक बुनियादी समझ और प्रतिक्रिया हुक.
  • एक स्टार्टर रिएक्ट प्रोजेक्ट। अभी-अभी एक प्रतिक्रिया ऐप बनाएं और आप जाने के लिए तैयार हैं।

एक बटन घटक बनाएं

थीम को डार्क से लाइट में टॉगल करने के लिए बटन कंपोनेंट जिम्मेदार होगा। वास्तविक अनुप्रयोग में, यह बटन नेवबार घटक का भाग हो सकता है।

instagram viewer

src फ़ोल्डर में, Button.js नामक एक नई फ़ाइल बनाएँ और निम्न कोड जोड़ें।

आयात {यूजस्टेट} से 'प्रतिक्रिया'
निर्यात करनाचूकसमारोहबटन() {
 कॉन्स्ट [थीम, सेटथीम] = यूज़स्टेट ("अँधेरा")
स्थिरांक हैंडल टॉगल = () => {
 कॉन्स्ट न्यूथीम = थीम "रोशनी"? "अँधेरा": "रोशनी"
 सेटथीम (नई थीम)
 }
वापसी (
<>
<बटन वर्गनाम="विषयबीटीएन" ऑनक्लिक = {हैंडल टॉगल}>
 {थीम "रोशनी"? <अवधि>अँधेरा</span>: <अवधि>रोशनी</span>}
</button>
</>
 )
}

सबसे पहले, रिएक्ट से यूज़स्टेट () हुक आयात करें। आप इसका उपयोग वर्तमान विषय पर नज़र रखने के लिए करेंगे।

बटन घटक में, राज्य को अंधेरे में प्रारंभ करें। हैंडलटॉगल () फ़ंक्शन टॉगलिंग कार्यक्षमता का ख्याल रखेगा। यह हर बार बटन क्लिक करने पर चलता है।

जब यह विषय बदलता है तो यह घटक बटन टेक्स्ट को भी टॉगल करता है।

बटन घटक को प्रदर्शित करने के लिए इसे App.js में आयात करें।

आयात बटन से '।/बटन';
समारोहअनुप्रयोग() {
वापसी (
<डिव>
<बटन/>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

CSS शैलियाँ बनाएँ

अभी, बटन पर क्लिक करने से रिएक्ट ऐप का UI नहीं बदलता है। उसके लिए, आपको सबसे पहले डार्क और लाइट मोड के लिए CSS स्टाइल बनाने होंगे।

App.css में, निम्नलिखित जोड़ें।

तन {
 --रंग-पाठ-प्राथमिक: #131616;
 --रंग-पाठ-माध्यमिक: #ff6b00;
 --रंग-बीजी-प्राथमिक: #E6EDEE;
 --रंग-बीजी-माध्यमिक: #7d86881c;
 पार्श्वभूमि: वर(--रंग-बीजी-प्राथमिक);
 रंग: वर(--रंग-पाठ-प्राथमिक);
संक्रमण: पार्श्वभूमि 0.25sआराम से बाहर;
}
शरीर [डेटा-थीम ="रोशनी"] {
 --रंग-पाठ-प्राथमिक: #131616;
 --रंग-बीजी-प्राथमिक: #E6EDEE;
}
शरीर [डेटा-थीम ="अँधेरा"] {
 --रंग-पाठ-प्राथमिक: #F2F5F7;
 --रंग-बीजी-प्राथमिक: #0E141B;
}

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

आप थीम के साथ बदलने के लिए बटन तत्व शैलियों को भी संशोधित कर सकते हैं।

.थीमबीटीएन {
 पैडिंग: 10px;
 रंग: वर(--रंग-पाठ-प्राथमिक);
 पृष्ठभूमि: पारदर्शी;
 सीमा: 1पीएक्स ठोस वर(--रंग-पाठ-प्राथमिक);
 कर्सर: सूचक;
}

शैलियों को टॉगल करने के लिए बटन घटक को संशोधित करें

CSS फ़ाइल में परिभाषित शैलियों को टॉगल करने के लिए, आपको हैंडलटॉगल () फ़ंक्शन में डेटा को बॉडी एलिमेंट में सेट करना होगा।

Button.js में, हैंडलटॉगल () को इस तरह संशोधित करें:

स्थिरांक हैंडल टॉगल = () => {
 कॉन्स्ट न्यूथीम = थीम "रोशनी"? "अँधेरा": "रोशनी"
 सेटथीम (नई थीम)
दस्तावेज़.body.dataset.theme = विषय
}

यदि आप बटन पर क्लिक करते हैं, तो बैकग्राउंड को डार्क से लाइट या लाइट से डार्क में टॉगल करना चाहिए। हालाँकि, यदि आप पृष्ठ को ताज़ा करते हैं, तो विषयवस्तु रीसेट हो जाती है। थीम सेटिंग को बनाए रखने के लिए, थीम वरीयता को इसमें स्टोर करें स्थानीय भंडार.

स्थानीय संग्रहण में स्थायी उपयोगकर्ता वरीयता

जैसे ही बटन घटक प्रस्तुत करता है, आपको उपयोगकर्ता वरीयता प्राप्त करनी चाहिए। useEffect() हुक इसके लिए एकदम सही है क्योंकि यह हर रेंडर के बाद चलता है।

विषयवस्तु को स्थानीय संग्रहण से पुनर्प्राप्त करने से पहले, आपको पहले इसे संग्रहीत करना होगा।

Button.js में storeUserPreference() नामक एक नया फ़ंक्शन बनाएं।

स्थिरांक storeUserSetPreference = (pref) => {
 लोकलस्टोरेज.सेटआइटम ("थीम", प्रीफ़);
};

यह फ़ंक्शन उपयोगकर्ता वरीयता को तर्क के रूप में प्राप्त करता है और इसे थीम नामक आइटम के रूप में संग्रहीत करता है।

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

स्थिरांक हैंडल टॉगल = () => {
 कॉन्स्ट न्यूथीम = थीम "रोशनी"? "अँधेरा": "रोशनी"
 सेटथीम (नई थीम)
 storeUserSetPreference (newTheme)
दस्तावेज़.body.dataset.theme = विषय
}

निम्न फ़ंक्शन स्थानीय संग्रहण से थीम को पुनः प्राप्त करता है:

स्थिरांक getUserSetPreference = () => {
 स्थानीय स्टोरेज लौटाएं। getItem ("थीम");
};

आप इसे useEffect हुक में उपयोग करेंगे, इसलिए हर बार जब कंपोनेंट रेंडर करता है, तो यह थीम को अपडेट करने के लिए लोकल स्टोरेज से वरीयता प्राप्त करता है।

उपयोग प्रभाव (() => {
स्थिरांक उपयोगकर्तासेटप्रेफरेंस = getUserSetPreference ();
अगर (उपयोगकर्तासेट वरीयता) {
 सेटथीम (userSetPreference)
 }
दस्तावेज़.body.dataset.theme = विषय
}, [थीम])

ब्राउज़र सेटिंग्स से उपयोगकर्ता वरीयता प्राप्त करना

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

सबसे पहले, एक ऐसा फ़ंक्शन बनाएं जो उपयोगकर्ता वरीयता को पुनः प्राप्त करे।

Button.js में, निम्नलिखित जोड़ें।

स्थिरांक getMediaQueryPreference = () => {
 कॉन्स्ट मीडियाक्वेरी = "(पसंद-रंग-योजना: गहरा)";
स्थिरांक एमक्यूएल = खिड़की.मैचमीडिया (मीडियाक्वेरी);
स्थिरांक पसंद है = के प्रकार mql. "बूलियन" से मेल खाता है;
अगर (वरीयता है) {
 mql.matches लौटाएं? "अँधेरा": "रोशनी";
 }
};

इसके बाद, मीडिया क्वेरी वरीयता को पुनः प्राप्त करने के लिए useEffect() हुक को संशोधित करें और यदि स्थानीय स्टोरेज में कोई थीम सेट नहीं है तो इसका उपयोग करें।

उपयोग प्रभाव (() => {
स्थिरांक उपयोगकर्तासेटप्रेफरेंस = getUserSetPreference ();
स्थिरांक MediaQueryPreference = getMediaQueryPreference ();
अगर (उपयोगकर्तासेट वरीयता) {
 सेटथीम (userSetPreference)
 } वरना {
 सेटथीम (mediaQueryPreference)
 }
दस्तावेज़.body.dataset.theme = विषय
}, [थीम])

यदि आप अपने एप्लिकेशन को पुनरारंभ करते हैं, तो थीम को आपके सिस्टम की सेटिंग से मेल खाना चाहिए।

डार्क मोड को टॉगल करने के लिए रिएक्ट कॉन्टेक्स्ट का उपयोग करना

रिएक्ट एप्लिकेशन की थीम को टॉगल करने के लिए आप डेटा विशेषताओं, सीएसएस और रिएक्ट हुक का उपयोग कर सकते हैं।

रिएक्ट में डार्क मोड को संभालने का एक अन्य तरीका संदर्भ एपीआई का उपयोग करना है। प्रतिक्रिया संदर्भ आपको प्रॉप्स के माध्यम से इसे पारित किए बिना घटकों में डेटा साझा करने की अनुमति देता है। थीम को टॉगल करने के लिए इसका उपयोग करते समय, आप एक थीम संदर्भ बनाते हैं जिसे आप पूरे एप्लिकेशन में एक्सेस कर सकते हैं। फिर आप मिलान शैलियों को लागू करने के लिए थीम मान का उपयोग कर सकते हैं।

जबकि यह दृष्टिकोण काम करता है, सीएसएस डेटा विशेषताओं का उपयोग करना आसान है।