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

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

מה אתה צריך

כדי לעקוב אחר הדרכה זו, תזדקק לדברים הבאים:

  • גרסה עדכנית של Node מותקנת במחשב שלך.
  • הבנה בסיסית של React ו ווי תגובה.
  • פרויקט React מתחיל. רַק ליצור אפליקציית React ואתה מוכן ללכת.

צור רכיב לחצן

רכיב הכפתורים יהיה אחראי על החלפת הנושא מחושך לבהיר. באפליקציה אמיתית, כפתור זה עשוי להיות חלק מרכיב ה- Navbar.

בתיקיית src, צור קובץ חדש בשם Button.js והוסף את הקוד הבא.

יְבוּא { useState } מ 'לְהָגִיב'
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלַחְצָן() {
 const [theme, settheme] = useState("אפל")
const handleToggle = () => {
 const newTheme = ערכת נושא "אוֹר"? "אפל"





instagram viewer

: "אוֹר"
 settheme (newTheme)
 }
לַחֲזוֹר (
<>
<כפתור className="themeBtn" onClick={handleToggle}>
 {נושא "אוֹר"? <לְהַקִיף>אפל</span>: <לְהַקִיף>אוֹר</span>}
</button>
</>
 )
}

ראשית, ייבא את ה- useState() מ-React. אתה תשתמש בו כדי לעקוב אחר הנושא הנוכחי.

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

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

כדי להציג את רכיב הלחצן, ייבא אותו אל App.js.

יְבוּא לַחְצָן מ './לַחְצָן';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<div>
<לַחְצָן/>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

צור את סגנונות ה-CSS

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

ב-App.css, הוסף את הדברים הבאים.

גוף {
 --color-text-primary: #131616;
 --צבע-טקסט-משני: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 רקע כללי: var(--color-bg-primary);
 צֶבַע: var(--צבע-טקסט-ראשוני);
מַעֲבָר: רקע כללי 0.25 שניותקלות-in-out;
}
body[data-theme="אוֹר"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
body[data-theme="אפל"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

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

אתה יכול גם לשנות את סגנונות רכיבי הכפתור כדי להשתנות עם ערכת הנושא.

.themeBtn {
 ריפוד: 10px;
 צֶבַע: var(--צבע-טקסט-ראשוני);
 רקע: שקוף;
 גבול: 1פיקסלים מוצקים var(--צבע-טקסט-ראשוני);
 סמן: מצביע;
}

שנה את רכיב הלחצן כדי להחליף סגנונות

כדי להחליף את הסגנונות המוגדרים בקובץ ה-CSS, תצטרך להגדיר את הנתונים באלמנט body בפונקציה handleToggle() .

ב-Button.js, שנה את handleToggle() כך:

const handleToggle = () => {
 const newTheme = ערכת נושא "אוֹר"? "אפל": "אוֹר"
 settheme (newTheme)
מסמך‎.body.dataset.theme = ערכת נושא
}

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

העדפת משתמש מתמשכת באחסון מקומי

עליך לאחזר את העדפת המשתמש ברגע שרכיב הלחצן יוצג. ה- useEffect() הוא מושלם עבור זה מכיוון שהוא פועל לאחר כל רינדור.

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

צור פונקציה חדשה בשם storeUserPreference() ב-Button.js.

const storeUserSetPreference = (pref) => {
 localStorage.setItem("נושא", העדפה);
};

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

אתה תקרא לפונקציה הזו בכל פעם שהמשתמש יחליף את ערכת הנושא. אז שנה את הפונקציה handleToggle() כך שתראה כך:

const handleToggle = () => {
 const newTheme = ערכת נושא "אוֹר"? "אפל": "אוֹר"
 settheme (newTheme)
 storeUserSetPreference (נושא חדש)
מסמך‎.body.dataset.theme = ערכת נושא
}

הפונקציה הבאה מאחזרת את ערכת הנושא מאחסון מקומי:

const getUserSetPreference = () => {
 החזר את localStorage.getItem("נושא");
};

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

useEffect(() => {
const userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
מסמך‎.body.dataset.theme = ערכת נושא
}, [נושא])

קבלת העדפות משתמש מהגדרות הדפדפן

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

ראשית, צור פונקציה המאחזרת את העדפת המשתמש.

ב-Button.js, הוסף את הדברים הבאים.

const getMediaQueryPreference = () => {
 const mediaQuery = "(מעדיף-סכמת צבעים: כהה)";
const mql = חַלוֹן.matchMedia (mediaQuery);
const hasPreference = סוג של mql.matches "בוליאני";
if (hasPreference) {
 להחזיר את mql.matches? "אפל": "אוֹר";
 }
};

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

useEffect(() => {
const userSetPreference = getUserSetPreference();
const mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } אַחֵר {
 settheme (mediaQueryPreference)
 }
מסמך‎.body.dataset.theme = ערכת נושא
}, [נושא])

אם תפעיל מחדש את היישום שלך, הנושא אמור להתאים להגדרות המערכת שלך.

שימוש בהקשר תגובה כדי להחליף מצב כהה

אתה יכול להשתמש בתכונות נתונים, ב-CSS וב-react hooks כדי לשנות את הנושא של אפליקציית React.

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

בעוד שגישה זו עובדת, השימוש בתכונות נתוני CSS הוא פשוט יותר.