ليس هناك شك في أن الوضع المظلم هو كل الغضب هذه الأيام. تقدم المزيد والمزيد من التطبيقات القدرة على التبديل إلى سمة داكنة ، ولسبب وجيه. إذا كنت تبحث عن إضافة الوضع المظلم إلى تطبيق React الخاص بك ، فهناك بعض الأشياء التي ستحتاج إلى القيام بها. في هذه المقالة ، ستتعلم كيفية إضافة الوضع المظلم إلى تطبيق React باستخدام الخطاف useState و useEffect.
ما هو الوضع المظلم؟
الوضع المظلم هو سمة تقوم بتبديل لوحة الألوان للتطبيق من الفاتح إلى الداكن. في الوقت الحاضر ، تتمتع معظم التطبيقات بالقدرة على التبديل بين أوضاع الضوء والظلام. يمكن أن يكون هذا مفيدًا لأولئك الذين يفضلون العمل في بيئة مظلمة ، أو لأولئك الذين يجدونها أسهل للعيون.
لماذا نستخدم الوضع الداكن؟
هناك عدد من الأسباب التي قد تجعلك ترغب في استخدام الوضع المظلم في تطبيق React الخاص بك. دعونا نلقي نظرة على عدد قليل من أكثرها شعبية.
1. تحسين عمر البطارية
تتمثل إحدى مزايا الوضع المظلم في أنه يمكن أن يساعد في تحسين عمر البطارية على الأجهزة المزودة بشاشات OLED أو AMOLED. وذلك لأن وحدات البكسل الداكنة تتطلب طاقة أقل للعرض.
2. تقليل إجهاد العين
إذا وجدت نفسك تتصفح الويب أو تستخدم التطبيقات ليلاً ، فيمكن أن يساعد الوضع المظلم في تقليل إجهاد العين. هذا لأنه يقلل من كمية الضوء الأبيض أو الأزرق الساطع المنبعث من الشاشة.
3. خلق تجربة غامرة أكثر
يجد بعض الأشخاص أن الوضع المظلم يخلق تجربة غامرة أكثر. يمكن أن يكون هذا صحيحًا بشكل خاص عند استخدام التطبيقات أو مواقع الويب التي تحتوي على الكثير من المحتوى ، مثل تطبيقات الأخبار أو وسائل التواصل الاجتماعي.
كيفية إضافة الوضع المظلم إلى تطبيق React
تعد إضافة الوضع المظلم إلى تطبيق React أمرًا بسيطًا نسبيًا. الخطوات اللازمة لإضافة الوضع الداكن إلى تطبيق React الخاص بك مذكورة أدناه.
قبل أن نبدأ ، ستحتاج إلى التأكد من أن لديك ملف تم إعداد تطبيق React.
1. استخدم خطاف useState
أول شيء عليك القيام به هو إنشاء متغير حالة لتتبع المظهر الحالي لتطبيقك. يمكن القيام بذلك باستخدام خطاف useState. لهذا ، يجب أن يكون لديك فهم أساسي لـ كيفية العمل مع خطاف useState.
يستورد رد فعل ، {useState} من 'تتفاعل'؛
وظيفةتطبيق() {
const [theme، setTheme] = useState ('خفيفة');
إرجاع (
التطبيق $ {موضوع}`}>
<h1>مرحبا بالعالم!</h1>
</div>
);
}
يصدّرإفتراضي تطبيق؛يستورد مقتطف الشفرة الخطاف useState من React وينشئ متغير حالة يسمى theme. يتتبع متغير السمة الموضوع الحالي للتطبيق ، والذي يعينه الرمز على "فاتح" افتراضيًا.
2. أضف زر تبديل
بعد ذلك ، أضف زر تبديل إلى التطبيق بحيث يمكن للمستخدمين التبديل بين الوضع الفاتح والداكن. يمكن القيام بذلك باستخدام الكود التالي:
يستورد رد فعل ، {useState} من 'تتفاعل'؛
وظيفةتطبيق() {
const [theme، setTheme] = useState ('خفيفة');
مقدار ثابت toggleTheme = () => {
إذا (موضوع 'خفيفة') {
setTheme ('مظلم');
} آخر {
setTheme ('خفيفة');
}
};
إرجاع (
التطبيق $ {موضوع}`}>
<زر onClick = {toggleTheme}>تبديل الموضوع</button>
<h1>مرحبا بالعالم!</h1>
</div>
);
}
يصدّرإفتراضي تطبيق؛يتضمن مقتطف الشفرة أعلاه وظيفة toggleTheme لتغيير متغير حالة السمة بين "light" و "dark" ، بالإضافة إلى زر لاستدعاء وظيفة toggleTheme عند النقر فوقها.
3. استخدم خطاف useEffect
بعد ذلك ، استخدم الخطاف useEffect لتحديث سمة التطبيق ديناميكيًا بناءً على متغير حالة السمة.
يستورد React ، {useState ، useEffect} من 'تتفاعل'؛
وظيفةتطبيق() {
const [theme، setTheme] = useState ('خفيفة');
مقدار ثابت toggleTheme = () => {
إذا (موضوع 'خفيفة') {
setTheme ('مظلم');
} آخر {
setTheme ('خفيفة');
}
};
useEffect (() => {
وثيقة.body.className = موضوع ؛
}, [سمة]);
إرجاع (
التطبيق $ {موضوع}`}>
<زر onClick = {toggleTheme}>تبديل الموضوع</button>
<h1>مرحبا بالعالم!</h1>
</div>
);
}
يصدّرإفتراضي تطبيق؛يستخدم مقتطف الشفرة أعلاه الخطاف useEffect لتحديث اسم فئة عنصر document.body استنادًا إلى متغير حالة السمة. يتيح لك ذلك تحديث CSS للتطبيق ديناميكيًا بناءً على السمة.
4. إضافة CSS للأوضاع الداكنة والخفيفة
بعد ذلك ، أضف CSS للأوضاع الداكنة والفاتحة. يمكنك القيام بذلك عن طريق إنشاء ملف يسمى darkMode.css وإضافة CSS التالية:
.مظلم {
لون الخلفية: #333;
اللون: #fff ؛
}
.خفيفة {
لون الخلفية: #fff ؛
اللون: #333;
}بعد ذلك ، ستحتاج إلى استيراد ملف CSS إلى تطبيقك. يمكن القيام بذلك باستخدام الكود التالي:
يستورد React ، {useState ، useEffect} من 'تتفاعل'؛
يستورد './darkMode.css';
وظيفةتطبيق() {
const [theme، setTheme] = useState ('خفيفة');
مقدار ثابت toggleTheme = () => {
إذا (موضوع 'خفيفة') {
setTheme ('مظلم');
} آخر {
setTheme ('خفيفة');
}
};
useEffect (() => {
وثيقة.body.className = موضوع ؛
}, [سمة]);
إرجاع (
التطبيق $ {موضوع}`}>
<زر onClick = {toggleTheme}>تبديل الموضوع</button>
<h1>مرحبا بالعالم!</h1>
</div>
);
}
يصدّرإفتراضي تطبيق؛5. قم بالتبديل إلى أوضاع مختلفة
الآن بعد أن أضفت CSS للأوضاع الداكنة والفاتحة ، يمكنك التبديل بينهما بالنقر فوق زر التبديل. للقيام بذلك ، عليك أولاً بدء خادم التطوير. يمكنك القيام بذلك عن طريق تشغيل الأمر الطرفي التالي:
npm بدايةبعد ذلك ، يمكنك فتح التطبيق في المتصفح والنقر فوق زر التبديل للتبديل بين الوضع الداكن والفاتح.
خيارات إضافية لـ Dark Mode في React
إذا كنت تريد أن يستمر المظهر عبر تحديثات الصفحة ، يمكنك ذلك استخدم LocalStorage API لتخزين البيانات. للقيام بذلك ، ستحتاج أولاً إلى إضافة الكود التالي إلى التطبيق الخاص بك:
يستورد React ، {useState ، useEffect} من 'تتفاعل'؛
يستورد './darkMode.css';
وظيفةتطبيق() {
مقدار ثابت [موضوع ، setTheme] = useState (
localStorage.getItem ('سمة') || 'خفيفة'
);
مقدار ثابت toggleTheme = () => {
إذا (موضوع 'خفيفة') {
setTheme ('مظلم');
} آخر {
setTheme ('خفيفة');
}
};
useEffect (() => {
localStorage.setItem ('سمة'، سمة)؛
وثيقة.body.className = موضوع ؛
}, [سمة]);
إرجاع (
التطبيق $ {موضوع}`}>
<زر onClick = {toggleTheme}>تبديل الموضوع</button>
<h1>مرحبا بالعالم!</h1>
</div>
);
}
يصدّرإفتراضي تطبيق؛يتضمن مقتطف الشفرة أعلاه القدرة على الاحتفاظ بالموضوع بعد تحديث الصفحة. يتم ذلك باستخدام localStorage API. أولاً ، يتحقق لمعرفة ما إذا كان هناك سمة مخزنة في localStorage.
إذا كان هناك موضوع ، فسيتم استخدام هذا الموضوع. إذا لم يكن الأمر كذلك ، فسيتم استخدام المظهر "الخفيف". بعد ذلك ، تتم إضافة الكود إلى الخطاف useEffect لتخزين السمة في localStorage. هذا يضمن استمرار السمة عبر تحديثات الصفحة.
الوضع الداكن لا ينتهي في React
هناك العديد من الطرق التي يمكنك من خلالها إضافة الوضع المظلم إلى تطبيق React الخاص بك. في هذه المقالة ، يتم عرض طريقة واحدة للقيام بذلك باستخدام الخطاف useState و useEffect. ومع ذلك ، هناك العديد من الطرق الأخرى التي يمكنك القيام بها أيضًا.
على سبيل المثال ، يمكنك استخدام واجهة برمجة تطبيقات سياق React لإنشاء موفر سمة. سيسمح لك ذلك بلف التطبيق بالكامل في مكون مزود السمات والوصول إلى السمة في أي مكان في التطبيق الخاص بك.
يمكنك أيضًا تمكين الوضع المظلم على متصفحك واستخدام استعلامات وسائط CSS لتطبيق أنماط مختلفة اعتمادًا على سمة المتصفح.