अपने रिएक्ट ऐप में डार्क मोड थीम कैसे जोड़ें

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

डार्क मोड क्या है?

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

डार्क मोड का उपयोग क्यों करें?

आपके रिएक्ट एप्लिकेशन में डार्क मोड का उपयोग करने के कई कारण हो सकते हैं। आइए कुछ सबसे लोकप्रिय लोगों पर एक नज़र डालें।

1. बैटरी लाइफ में सुधार

डार्क मोड का एक लाभ यह है कि यह OLED या AMOLED डिस्प्ले वाले उपकरणों पर बैटरी जीवन को बेहतर बनाने में मदद कर सकता है। ऐसा इसलिए है क्योंकि गहरे रंग के पिक्सल को प्रदर्शित करने के लिए कम शक्ति की आवश्यकता होती है।

2. आंखों का तनाव कम करें

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

3. एक अधिक इमर्सिव अनुभव बनाएं

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

रिएक्ट एप्लिकेशन में डार्क मोड कैसे जोड़ें

रिएक्ट एप्लिकेशन में डार्क मोड जोड़ना अपेक्षाकृत सरल है। आपके रिएक्ट एप्लिकेशन में डार्क मोड जोड़ने के लिए आवश्यक कदम नीचे सूचीबद्ध हैं।

इससे पहले कि हम शुरू करें, आपको यह सुनिश्चित करना होगा कि आपके पास प्रतिक्रिया आवेदन की स्थापना.

1. यूजस्टेट हुक का प्रयोग करें

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

आयात प्रतिक्रिया, {यूजस्टेट} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
 कॉन्स्ट [थीम, सेटथीम] = यूज़स्टेट ('रोशनी');
वापसी (
`ऐप ${थीम}`}>
<एच 1>नमस्ते दुनिया!</h1>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

कोड स्निपेट रिएक्ट से यूज़स्टेट हुक आयात करता है और थीम नामक एक स्टेट वेरिएबल बनाता है। थीम वेरिएबल एप्लिकेशन की वर्तमान थीम को ट्रैक करता है, जिसे कोड डिफ़ॉल्ट रूप से 'लाइट' पर सेट करता है।

2. एक टॉगल बटन जोड़ें

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

आयात प्रतिक्रिया, {यूजस्टेट} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
 कॉन्स्ट [थीम, सेटथीम] = यूज़स्टेट ('रोशनी');
स्थिरांक टॉगलथीम = () => {
 अगर (विषय) 'रोशनी') {
 थीम सेट करें ('अँधेरा');
 } वरना {
 थीम सेट करें ('रोशनी');
 }
 };
वापसी (
`ऐप ${थीम}`}>
<बटन ऑनक्लिक={toggleTheme}>थीम टॉगल करें</button>
<एच 1>नमस्ते दुनिया!</h1>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

ऊपर दिए गए कोड स्निपेट में 'लाइट' और 'डार्क' के बीच थीम स्टेट वेरिएबल को बदलने के लिए एक टॉगलथीम फ़ंक्शन शामिल है, साथ ही क्लिक करने पर टॉगलथीम फ़ंक्शन को कॉल करने के लिए एक बटन भी शामिल है।

3. उपयोग का प्रयोग करेंप्रभाव हुक

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

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
 कॉन्स्ट [थीम, सेटथीम] = यूज़स्टेट ('रोशनी');
स्थिरांक टॉगलथीम = () => {
 अगर (विषय) 'रोशनी') {
 थीम सेट करें ('अँधेरा');
 } वरना {
 थीम सेट करें ('रोशनी');
 }
 };
 उपयोग प्रभाव (() => {
दस्तावेज़.body.className = विषयवस्तु;
 }, [थीम]);
वापसी (
`ऐप ${थीम}`}>
<बटन ऑनक्लिक={toggleTheme}>थीम टॉगल करें</button>
<एच 1>नमस्ते दुनिया!</h1>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

ऊपर दिया गया कोड स्निपेट, थीम स्टेट वेरिएबल के आधार पर document.body तत्व के क्लासनाम को अपडेट करने के लिए useEffect हुक का उपयोग करता है। यह आपको थीम के आधार पर एप्लिकेशन के सीएसएस को गतिशील रूप से अपडेट करने की अनुमति देता है।

4. डार्क और लाइट मोड के लिए CSS जोड़ना

इसके बाद, डार्क और लाइट मोड के लिए CSS जोड़ें। आप 'darkMode.css' नामक फ़ाइल बनाकर और निम्नलिखित CSS जोड़कर ऐसा कर सकते हैं:

।अँधेरा {
 पीछे का रंग: #333;
 रंग: #fff;
}
।रोशनी {
 पीछे का रंग: #fff;
 रंग: #333;
}

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

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया';
आयात './darkMode.css';
समारोहअनुप्रयोग() {
 कॉन्स्ट [थीम, सेटथीम] = यूज़स्टेट ('रोशनी');
स्थिरांक टॉगलथीम = () => {
 अगर (विषय) 'रोशनी') {
 थीम सेट करें ('अँधेरा');
 } वरना {
 थीम सेट करें ('रोशनी');
 }
 };
 उपयोग प्रभाव (() => {
दस्तावेज़.body.className = विषयवस्तु;
 }, [थीम]);
वापसी (
`ऐप ${थीम}`}>
<बटन ऑनक्लिक={toggleTheme}>थीम टॉगल करें</button>
<एच 1>नमस्ते दुनिया!</h1>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

5. विभिन्न मोड में स्विच करें

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

NPM प्रारंभ

उसके बाद, आप ब्राउज़र में एप्लिकेशन खोल सकते हैं और डार्क और लाइट मोड के बीच स्विच करने के लिए टॉगल बटन पर क्लिक कर सकते हैं।

प्रतिक्रिया में डार्क मोड के लिए अतिरिक्त विकल्प

यदि आप चाहते हैं कि विषय पूरे पृष्ठ पर ताज़ा बना रहे, तो आप कर सकते हैं डेटा स्टोर करने के लिए लोकलस्टोरेज एपीआई का उपयोग करें. ऐसा करने के लिए, आपको पहले अपने आवेदन में निम्नलिखित कोड जोड़ना होगा:

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया';
आयात './darkMode.css';
समारोहअनुप्रयोग() {
स्थिरांक [थीम, सेटथीम] = यूजस्टेट (
 लोकलस्टोरेज.गेटआइटम ('थीम') || 'रोशनी'
 );
स्थिरांक टॉगलथीम = () => {
 अगर (विषय) 'रोशनी') {
 थीम सेट करें ('अँधेरा');
 } वरना {
 थीम सेट करें ('रोशनी');
 }
 };
 उपयोग प्रभाव (() => {
 लोकलस्टोरेज.सेटआइटम ('थीम', थीम);
दस्तावेज़.body.className = विषयवस्तु;
 }, [थीम]);
वापसी (
`ऐप ${थीम}`}>
<बटन ऑनक्लिक={toggleTheme}>थीम टॉगल करें</button>
<एच 1>नमस्ते दुनिया!</h1>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

उपरोक्त कोड स्निपेट में पेज रीफ्रेश होने के बाद थीम को रखने की क्षमता शामिल है। यह लोकलस्टोरेज एपीआई का उपयोग करके किया जाता है। सबसे पहले, यह देखने के लिए जांच करता है कि स्थानीय स्टोरेज में कोई थीम संग्रहीत है या नहीं।

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

प्रतिक्रिया में डार्क मोड समाप्त नहीं होता है

ऐसे कई तरीके हैं जिनसे आप अपने रिएक्ट एप्लिकेशन में डार्क मोड जोड़ सकते हैं। इस लेख में, useState और useEffect हुक का उपयोग करके इसे करने का एक तरीका दिखाया गया है। हालाँकि, आप इसे कई अन्य तरीकों से भी कर सकते हैं।

उदाहरण के लिए, आप थीम प्रदाता बनाने के लिए React Context API का उपयोग कर सकते हैं। यह आपको अपने संपूर्ण एप्लिकेशन को थीम प्रदाता घटक में लपेटने और आपके एप्लिकेशन में कहीं भी थीम तक पहुंचने की अनुमति देगा।

आप अपने ब्राउज़र पर डार्क मोड भी सक्षम कर सकते हैं और ब्राउज़र की थीम के आधार पर विभिन्न शैलियों को लागू करने के लिए CSS मीडिया क्वेरी का उपयोग कर सकते हैं।