שיעור 3: צבע, ניגודיות ומצב כהה — תמה אחת, שני מצבים
מנהל/ת המוצר מבקש/ת מצב כהה — ומתברר שכל קומפוננטה צריכה `dark:bg-gray-900 dark:text-white` נפרד. השיעור הזה מלמד להגדיר `טוקני צבע סמנטיים` עם משתני CSS — כך שמצב כהה הוא החלפת ערכים במקום אחד, ולא שכפול `dark:` בכל רכיב.
טוקן צבע סמנטי הוא כמו לומר 'צבע הקיר' במקום 'בז' מדויק'. כשעוברים למצב לילה, צובעים מחדש את כל מה שמוגדר 'צבע הקיר' בבת אחת — בלי לגעת בכל קיר בנפרד.
- טוקן צבע סמנטי
- טוקן ששמו מתאר תפקיד — `surface`, `on-surface`, `border` — ולא גוון. הקומפוננטה מבקשת את התפקיד, וה-theme מחליט איזה גוון מתאים לכל מצב.
- theming עם משתני CSS
- הגדרת ערכי הצבע כמשתני CSS (`--surface`) ב-`:root`, והחלפתם תחת `.dark`. הקומפוננטות מפנות למשתנה, אז החלפת הערך משנה את כולן בבת אחת.
- יחס ניגודיות
- מדד הקריאוּת בין צבע טקסט לרקע. תקן WCAG AA דורש לפחות 4.5:1 לטקסט רגיל — וטוקן סמנטי צריך לעמוד בו בשני המצבים.
- אסטרטגיית מצב כהה
- הבחירה איך לממש מצב כהה: שכפול `dark:` בכל רכיב (לא מתוחזק) מול החלפת ערכי טוקנים במקום אחד דרך מחלקת `.dark` (מתוחזק).
