أصبح من الشائع أن تحتوي التطبيقات على إعداد يتيح لك التبديل بين الوضع الداكن والفاتح. ربما يرجع ذلك إلى شعبية واجهات المستخدم المظلمة ، وربما يرجع ذلك إلى زيادة قابلية تهيئة التطبيقات تدريجيًا.
يُعد سياق التفاعل طريقة سهلة لمشاركة البيانات عالميًا ، ولكنه قد يجعل إعادة استخدام المكونات أكثر صعوبة. كبديل ، يمكنك إنشاء مكون زر الوضع المظلم الذي يستخدم الخطافات useEffect و useState بدلاً من السياق. سيتم تبديل سمة البيانات على عنصر الجسم الذي يمكن أن تستهدفه أنماط CSS.
ماذا ستحتاج
لمتابعة هذا البرنامج التعليمي ، ستحتاج إلى ما يلي:
- تم تثبيت إصدار حديث من Node على جهازك.
- فهم أساسي لـ React و رد فعل الخطافات.
- مشروع بداية React. فقط إنشاء تطبيق React وأنت على استعداد للذهاب.
قم بإنشاء مكون زر
سيكون مكون الزر مسؤولاً عن تبديل السمة من الظلام إلى الفاتح. في تطبيق حقيقي ، قد يكون هذا الزر جزءًا من مكون Navbar.
في المجلد src ، أنشئ ملفًا جديدًا يسمى Button.js وأضف الكود التالي.
يستورد {useState} من 'تتفاعل'يصدّرإفتراضيوظيفةزر() {
const [theme، Settheme] = useState ("مظلم")
مقدار ثابت handleToggle = () => {
const newTheme = موضوع "خفيفة"? "مظلم": "خفيفة"
تسوية (موضوع جديد)
}
إرجاع (
<>
<زر className ="موضوع" onClick = {handleToggle}>
{سمة "خفيفة"? <يولد>مظلم</span>: <يولد>خفيفة</span>}
</button>
</>
)
}
أولاً ، استورد الخطاف useState () من React. سوف تستخدمه لتتبع الموضوع الحالي.
في مكون الزر ، قم بتهيئة الحالة إلى الظلام. ستهتم وظيفة handleToggle () بوظيفة التبديل. يتم تشغيله في كل مرة يتم فيها النقر فوق الزر.
يقوم هذا المكون أيضًا بتبديل نص الزر عندما يغير السمة.
لعرض مكون الزر ، قم باستيراده إلى App.js.
يستورد زر من './زر'؛
وظيفةتطبيق() {
إرجاع (
<شعبة>
<زر/>
</div>
);
}
يصدّرإفتراضي تطبيق؛
قم بإنشاء أنماط CSS
في الوقت الحالي ، لا يؤدي النقر فوق الزر إلى تغيير واجهة المستخدم لتطبيق React. لذلك ، ستحتاج أولاً إلى إنشاء أنماط CSS للوضع الداكن والخفيف.
في App.css ، أضف ما يلي.
هيئة {
- لون النص الأساسي: #131616;
- اللون - النص - الثانوية: # ff6b00 ؛
--اللون- bg- الابتدائي: # E6EDEE ؛
- اللون- bg- الثانوية: # 7d86881c ؛
معرفتي: فار(- color-bg-Primary) ؛
اللون: فار(- اللون - النص الأساسي) ؛
انتقال: معرفتي 0.25 ثانيةسهولة في الخروج;
}
الجسم [سمة البيانات ="خفيفة"] {
- لون النص الأساسي: #131616;
--اللون- bg- الابتدائي: # E6EDEE ؛
}
الجسم [سمة البيانات ="مظلم"] {
- لون النص الأساسي: # F2F5F7 ؛
--اللون- bg- الابتدائي: # 0E141B ؛
}
هنا ، أنت تحدد أنماط عنصر الجسم باستخدام سمات البيانات. هناك سمة بيانات السمة الخفيفة وسمة بيانات السمة المظلمة. كل واحد منهم لديه متغيرات CSS بألوان مختلفة. سيسمح لك استخدام سمات بيانات CSS بتبديل الأنماط وفقًا للبيانات. إذا اختار المستخدم سمة داكنة ، فيمكنك ضبط سمة بيانات الجسم على الظلام وستتغير واجهة المستخدم.
يمكنك أيضًا تعديل أنماط عنصر الزر لتغييرها مع السمة.
.themeBtn {
الحشو: 10 بكسل ؛
اللون: فار(- اللون - النص الأساسي) ؛
الخلفية: شفافة.
الحدود: 1بكسل صلبة فار(- اللون - النص الأساسي) ؛
المؤشر: المؤشر.
}
تعديل مكون الزر لتبديل الأنماط
لتبديل الأنماط المحددة في ملف CSS ، ستحتاج إلى تعيين البيانات في عنصر النص في وظيفة handleToggle ().
في Button.js ، قم بتعديل handleToggle () كما يلي:
مقدار ثابت handleToggle = () => {
const newTheme = موضوع "خفيفة"? "مظلم": "خفيفة"
تسوية (موضوع جديد)
وثيقة.body.dataset.theme = سمة
}
إذا قمت بالنقر فوق الزر ، فيجب أن تتحول الخلفية من الظلام إلى الفاتح أو الفاتح إلى الداكن. ومع ذلك ، إذا قمت بتحديث الصفحة ، فسيتم إعادة تعيين السمة. لاستمرار إعداد النسق ، قم بتخزين تفضيل النسق في التخزين المحلي.
تفضيل المستخدم المستمر في التخزين المحلي
يجب عليك استرداد تفضيلات المستخدم بمجرد عرض مكون Button. يعد الخطاف useEffect () مثاليًا لهذا لأنه يعمل بعد كل تصيير.
قبل استرداد السمة من التخزين المحلي ، تحتاج إلى تخزينها أولاً.
أنشئ وظيفة جديدة تسمى storeUserPreference () في Button.js.
مقدار ثابت storeUserSetPreference = (pref) => {
localStorage.setItem ("سمة"، بريف) ؛
};
تتلقى هذه الوظيفة تفضيلات المستخدم كوسيطة وتخزنها كعنصر يسمى سمة.
سوف تستدعي هذه الوظيفة في كل مرة يبدل فيها المستخدم السمة. لذلك ، قم بتعديل وظيفة handleToggle () لتبدو كما يلي:
مقدار ثابت handleToggle = () => {
const newTheme = موضوع "خفيفة"? "مظلم": "خفيفة"
تسوية (موضوع جديد)
storeUserSetPreference (newTheme)
وثيقة.body.dataset.theme = سمة
}
تسترد الوظيفة التالية السمة من التخزين المحلي:
مقدار ثابت getUserSetPreference = () => {
إرجاع localStorage.getItem ("سمة");
};
ستستخدمه في خطاف useEffect بحيث في كل مرة يتم عرض المكون ، فإنه يجلب التفضيل من التخزين المحلي لتحديث السمة.
useEffect (() => {
مقدار ثابت userSetPreference = getUserSetPreference () ،
إذا (userSetPreference) {
ضبط (userSetPreference)
}
وثيقة.body.dataset.theme = سمة
}, [سمة])
الحصول على تفضيلات المستخدم من إعدادات المستعرض
للحصول على تجربة مستخدم أفضل ، يمكنك استخدام يفضل نظام الألوان ميزة وسائط CSS لتعيين السمة. يجب أن يعكس هذا إعدادات نظام المستخدم التي يمكنه التحكم فيها عبر نظام التشغيل أو المتصفح. يمكن أن يكون الإعداد فاتحًا أو غامقًا. في التطبيق الخاص بك ، سوف تحتاج إلى التحقق من هذا الإعداد فور تحميل مكون الزر. هذا يعني تنفيذ هذه الوظيفة في الخطاف useEffect ().
أولاً ، قم بإنشاء دالة تسترد تفضيلات المستخدم.
في Button.js ، أضف ما يلي.
مقدار ثابت getMediaQueryPreference = () => {
const mediaQuery = "(يفضل نظام الألوان: غامق)";
مقدار ثابت مقل = نافذة او شباك.matchMedia (mediaQuery) ؛
مقدار ثابت hasPreference = نوع من mql.matches "منطقية" ؛
إذا (hasPreference) {
عودة mql.matches؟ "مظلم": "خفيفة";
}
};
بعد ذلك ، قم بتعديل الخطاف useEffect () لاسترداد تفضيل استعلام الوسائط واستخدامه إذا لم يتم تعيين سمة في التخزين المحلي.
useEffect (() => {
مقدار ثابت userSetPreference = getUserSetPreference () ،
مقدار ثابت mediaQueryPreference = getMediaQueryPreference () ،إذا (userSetPreference) {
ضبط (userSetPreference)
} آخر {
تسوية (mediaQueryPreference)
}
وثيقة.body.dataset.theme = سمة
}, [سمة])
إذا أعدت تشغيل التطبيق الخاص بك ، يجب أن يتطابق المظهر مع إعدادات نظامك.
استخدام سياق React لتبديل الوضع الداكن
يمكنك استخدام سمات البيانات و CSS وخطافات React لتبديل سمة تطبيق React.
هناك طريقة أخرى للتعامل مع الوضع المظلم في React وهي استخدام واجهة برمجة تطبيقات السياق. يتيح لك سياق React مشاركة البيانات عبر المكونات دون الحاجة إلى تمريرها عبر الخاصيات. عند استخدامه لتبديل السمات ، يمكنك إنشاء سياق سمة يمكنك الوصول إليه من خلال التطبيق. يمكنك بعد ذلك استخدام قيمة النسق لتطبيق الأنماط المطابقة.
أثناء عمل هذا النهج ، يكون استخدام سمات بيانات CSS أبسط.
