כיצד להוסיף ערכת נושא במצב כהה לאפליקציית React שלך

אין ספק שמצב אפל הוא כל הזעם בימים אלה. יותר ויותר אפליקציות מציעות את האפשרות לעבור לנושא אפל, ומסיבה טובה. אם אתה מחפש להוסיף מצב כהה לאפליקציית React שלך, יש כמה דברים שתצטרך לעשות. במאמר זה, תלמד כיצד להוסיף מצב כהה ליישום React באמצעות ה-useState ו-useEffect.

מהו המצב האפל?

המצב הכהה הוא ערכת נושא שמחליף את לוח הצבעים של אפליקציה מבהיר לכהה. כיום, לרוב האפליקציות יש את היכולת לעבור בין מצבי אור לחושך. זה יכול להיות מועיל עבור אלה שמעדיפים לעבוד בסביבה חשוכה, או עבור אלה שקל להם יותר על העיניים.

למה להשתמש במצב כהה?

ישנן מספר סיבות מדוע אולי תרצה להשתמש במצב כהה באפליקציית React שלך. בואו נסתכל על כמה מהפופולריים שבהם.

1. שפר את חיי הסוללה

אחד היתרונות של המצב האפל הוא שהוא יכול לעזור לשפר את חיי הסוללה במכשירים עם צגי OLED או AMOLED. הסיבה לכך היא שפיקסלים כהים יותר דורשים פחות כוח לתצוגה.

2. הפחת מאמץ בעיניים

אם אתה מוצא את עצמך גולש באינטרנט או משתמש באפליקציות בלילה, המצב האפל יכול לעזור להפחית את עומס העיניים. הסיבה לכך היא שהוא מקטין את כמות האור הלבן או הכחול הבהיר הנפלט מהמסך.

3. צור חוויה סוחפת יותר

חלק מהאנשים מוצאים שמצב כהה יוצר חוויה סוחפת יותר. זה יכול להיות נכון במיוחד בעת שימוש באפליקציות או אתרים עם תוכן רב, כגון אפליקציות חדשות או מדיה חברתית.

כיצד להוסיף מצב כהה ליישום React

הוספת מצב כהה לאפליקציית React היא פשוטה יחסית. השלבים הדרושים להוספת מצב כהה לאפליקציית React שלך מפורטים להלן.

לפני שנתחיל, תצטרך לוודא שיש לך א הגדרת אפליקציית React.

1. השתמש ב-useState Hook

הדבר הראשון שתצטרך לעשות הוא ליצור משתנה מצב כדי לעקוב אחר הנושא הנוכחי של היישום שלך. ניתן לעשות זאת באמצעות ה- useState hook. בשביל זה, אתה צריך להיות הבנה בסיסית של כיצד לעבוד עם ה- useState hook.

יְבוּא תגובה, { useState } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
 const [theme, setTheme] = useState('אוֹר');
לַחֲזוֹר (
`אפליקציה ${theme}`}>
<h1>שלום עולם!</h1>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קטע הקוד מייבא את ה-useState hook מ-React ויוצר משתנה מצב בשם theme. משתנה הנושא עוקב אחר הנושא הנוכחי של האפליקציה, שהקוד מגדיר ל'light' כברירת מחדל.

2. הוסף לחצן החלפת מצב

לאחר מכן, הוסף לחצן החלפת מצב לאפליקציה כדי שמשתמשים יוכלו לעבור בין מצב בהיר לחושך. ניתן לעשות זאת באמצעות הקוד הבא:

יְבוּא תגובה, { useState } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
 const [theme, setTheme] = useState('אוֹר');
const toggleTheme = () => {
 אם (נושא 'אוֹר') {
 setTheme('אפל');
 } אַחֵר {
 setTheme('אוֹר');
 }
 };
לַחֲזוֹר (
`אפליקציה ${theme}`}>
<button onClick={toggleTheme}>החלף נושא</button>
<h1>שלום עולם!</h1>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קטע הקוד שלמעלה כולל פונקציית toggleTheme לשינוי משתנה מצב הנושא בין 'אור' ל'כהה', כמו גם כפתור להתקשרות לפונקציית toggleTheme בעת לחיצה.

3. השתמש ב-useEffect Hook

לאחר מכן, השתמש ב-useEffect Hook כדי לעדכן באופן דינמי את ערכת הנושא של האפליקציה בהתבסס על משתנה מצב הנושא.

יְבוּא תגובה, { useState, useEffect } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
 const [theme, setTheme] = useState('אוֹר');
const toggleTheme = () => {
 אם (נושא 'אוֹר') {
 setTheme('אפל');
 } אַחֵר {
 setTheme('אוֹר');
 }
 };
 useEffect(() => {
מסמך.body.className = נושא;
 }, [נושא]);
לַחֲזוֹר (
`אפליקציה ${theme}`}>
<button onClick={toggleTheme}>החלף נושא</button>
<h1>שלום עולם!</h1>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קטע הקוד שלמעלה משתמש ב-useEffect hook כדי לעדכן את ה-className של האלמנט document.body בהתבסס על משתנה ה-theme state. זה מאפשר לך לעדכן באופן דינמי את ה-CSS של האפליקציה בהתבסס על הנושא.

4. הוספת ה-CSS עבור מצבי כהה ואור

לאחר מכן, הוסף את ה-CSS עבור המצבים הכהים והבהירים. אתה יכול לעשות זאת על ידי יצירת קובץ בשם 'darkMode.css' והוספת ה-CSS הבא:

.אפל {
 צבע רקע: #333;
 צֶבַע: #fff;
}
.אוֹר {
 צבע רקע: #fff;
 צֶבַע: #333;
}

לאחר מכן, יהיה עליך לייבא את קובץ ה-CSS ליישום שלך. ניתן לעשות זאת באמצעות הקוד הבא:

יְבוּא תגובה, { useState, useEffect } מ 'לְהָגִיב';
יְבוּא './darkMode.css';
פוּנקצִיָהאפליקציה() {
 const [theme, setTheme] = useState('אוֹר');
const toggleTheme = () => {
 אם (נושא 'אוֹר') {
 setTheme('אפל');
 } אַחֵר {
 setTheme('אוֹר');
 }
 };
 useEffect(() => {
מסמך.body.className = נושא;
 }, [נושא]);
לַחֲזוֹר (
`אפליקציה ${theme}`}>
<button onClick={toggleTheme}>החלף נושא</button>
<h1>שלום עולם!</h1>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

5. עבור למצבים שונים

כעת, לאחר שהוספת את ה-CSS עבור המצבים הכהים והבהירים, תוכל לעבור ביניהם על ידי לחיצה על לחצן החלפת המצב. כדי לעשות זאת, תחילה עליך להפעיל את שרת הפיתוח. אתה יכול לעשות זאת על ידי הפעלת פקודת המסוף הבאה:

npm הַתחָלָה

לאחר מכן, אתה יכול לפתוח את האפליקציה בדפדפן וללחוץ על כפתור המעבר כדי לעבור בין מצב כהה לבהיר.

אפשרויות נוספות עבור מצב כהה ב-React

אם אתה רוצה שהנושא יימשך לאורך כל רענון העמודים, אתה יכול השתמש ב-localStorage API כדי לאחסן את הנתונים. כדי לעשות זאת, תחילה תצטרך להוסיף את הקוד הבא לאפליקציה שלך:

יְבוּא תגובה, { useState, useEffect } מ 'לְהָגִיב';
יְבוּא './darkMode.css';
פוּנקצִיָהאפליקציה() {
const [theme, setTheme] = useState(
 localStorage.getItem('נושא') || 'אוֹר'
 );
const toggleTheme = () => {
 אם (נושא 'אוֹר') {
 setTheme('אפל');
 } אַחֵר {
 setTheme('אוֹר');
 }
 };
 useEffect(() => {
 localStorage.setItem('נושא', נושא);
מסמך.body.className = נושא;
 }, [נושא]);
לַחֲזוֹר (
`אפליקציה ${theme}`}>
<button onClick={toggleTheme}>החלף נושא</button>
<h1>שלום עולם!</h1>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קטע הקוד שלמעלה כולל את היכולת לשמור על ערכת הנושא לאחר רענון הדף. זה נעשה באמצעות ה-API של localStorage. ראשית, הוא בודק אם יש ערכת נושא המאוחסנת ב-localStorage.

אם יש נושא, נעשה שימוש בנושא הזה. אם לא, נעשה שימוש בנושא 'קל'. לאחר מכן, קוד נוסף ל-useEffect hook כדי לאחסן את ערכת הנושא ב-localStorage. זה מבטיח שהנושא נמשך לאורך כל רענון העמודים.

מצב אפל לא מסתיים ב-React

ישנן דרכים רבות בהן תוכל להוסיף מצב כהה לאפליקציית React שלך. במאמר זה מוצגת דרך אחת לעשות זאת באמצעות ה-useState ו-useEffect. עם זאת, ישנן דרכים רבות אחרות שתוכל לעשות זאת גם כן.

לדוגמה, אתה יכול להשתמש ב-React Context API כדי ליצור ספק ערכת נושא. זה יאפשר לך לעטוף את כל היישום שלך ברכיב של ספק ערכות נושא ולגשת לערכת הנושא בכל מקום ביישום שלך.

אתה יכול גם להפעיל מצב כהה בדפדפן שלך ולהשתמש בשאילתות מדיה של CSS כדי להחיל סגנונות שונים בהתאם לנושא הדפדפן.