8.8 ערכות נושא ומצב כהה תרגול
תרגול - ערכות נושא ומצב כהה¶
תרגיל 1¶
צרו כפתור החלפת מצב כהה/בהיר:
- ActionIcon עגול ב-header
- החלפה בין "בהיר" ל"כהה" בלחיצה
- Tooltip שמציג את המצב הנגדי ("עבור למצב כהה" / "עבור למצב בהיר")
- טקסט שונה באייקון לכל מצב
- שמירה ב-localStorage (אוטומטית עם Mantine)
- הוסיפו אפשרות שלישית "אוטומטי" (לפי הגדרות המערכת)
- הציגו כל 3 האפשרויות ב-SegmentedControl
תרגיל 2¶
צרו דף עם CSSVariablesResolver מותאם:
- הגדירו 10 משתני CSS מותאמים (bg, card, text, border, accent ועוד)
- ערכים שונים לבהיר ולכהה
- צרו layout עם header, sidebar ותוכן שמשתמש במשתנים
- כל האלמנטים מגיבים נכון למעבר בין מצבים
- הוסיפו transition על שינוי הצבעים
תרגיל 3¶
צרו מערכת 4 ערכות נושא (default, ocean, forest, sunset):
- כל ערכת נושא מגדירה: primaryColor, צבעי רקע, צבעי טקסט
- בורר ערכות נושא (Select או SegmentedControl)
- ההעדפה נשמרת ב-localStorage (useLocalStorage)
- דף דוגמה שמציג כפתורים, כרטיסיות, טקסטים ו-inputs
- כל הקומפוננטות מגיבות לשינוי ערכת הנושא
תרגיל 4¶
צרו דף הגדרות תצוגה מלא:
- בחירת ערכת צבעים (בהיר/כהה/אוטומטי)
- בחירת ערכת נושא (4 אפשרויות)
- בחירת גודל פונט (קטן/רגיל/גדול)
- בחירת צפיפות (compact/default/comfortable)
- תצוגה מקדימה של הבחירות בכרטיס לצד ההגדרות
- כל ההגדרות נשמרות ב-localStorage
- כפתור "איפוס" שמחזיר לברירות מחדל
תרגיל 5¶
צרו Layout מלא עם AppShell שתומך במצב כהה:
- Header עם לוגו, ניווט, וכפתור החלפת מצב
- Sidebar עם NavLinks
- תוכן ראשי עם סטטיסטיקות וטבלה
- כל האלמנטים מגיבים נכון למצב כהה
- השתמשו בצבעי Mantine (c="dimmed", bg="gray.0" ועם dark variants)
- Transition חלק במעבר בין מצבים
- Footer עם קישורים
תרגיל 6¶
צרו קומפוננטת ThemeProvider מותאמת שמרכזת את כל לוגיקת ה-theme:
- מנהלת: ערכת צבעים, ערכת נושא, גודל פונט
- חושפת context עם כל ההגדרות ופעולות שינוי
- Custom hook בשם useAppTheme שמאפשר גישה
- CSSVariablesResolver שמגיב לכל ההגדרות
- כפתור גלובלי של החלפת מצב שקורא ל-useAppTheme
- כל ההגדרות נשמרות ומשוחזרות
שאלות¶
- מה ההבדל בין useMantineColorScheme ל-useComputedColorScheme?
- למה Mantine שומרת את העדפת הצבעים ב-localStorage ולא ב-cookie?
- מה היתרון של CSSVariablesResolver על פני שימוש ב-data-mantine-color-scheme ב-CSS?
- איך ניתן למנוע "הבהוב" (flash) בטעינה ראשונית כשהמשתמש העדיף מצב כהה?
- מתי כדאי להשתמש ב-defaultColorScheme="auto" ומתי לא?