איך בניתי עיצוב כהה שלא נראה נורא

כשהשקתי את PriceGuess לראשונה, הוא היה בהיר בלבד. רקע לבן, טקסט כהה, גרדיאנטים ורודים-כחולים. זה נראה בסדר, אבל שחקנים שמשחקים בלילה (ויש הרבה כאלה — שעות השיא שלנו הן 21:00-23:00) ביקשו Dark Mode. מה שנשמע כמו "פשוט תהפוך את הצבעים" התגלה כפרויקט של שבועיים.

הטעות הראשונה: "פשוט לשנות צבעי רקע"

הגישה הראשונה שלי הייתה תמימה: לעבור על כל הקומפוננטות, למצוא bg-white ולהוסיף dark:bg-slate-900. אחרי שעה של עבודה הבנתי שזו גישה שלא תעבוד. היו לי מעל 50 קומפוננטות עם צבעים hardcoded, וכל שינוי יצר אפקט דומינו של בעיות ניגודיות (contrast).

הבעיה העיקרית: שחור הוא לא ההפך של לבן בעיצוב. רקע שחור מוחלט (#000) עם טקסט לבן מוחלט (#FFF) יוצר ניגודיות גבוהה מדי שפוגעת בעיניים. זה כמו להסתכל על פנס בחדר חשוך.

הפתרון: Design Tokens עם CSS Variables

עצרתי והחלטתי לעשות את זה נכון. יצרתי קובץ theme.css עם CSS Custom Properties (משתנים) שמגדירים את כל הצבעים במקום אחד:

• צבעי רקע — לא שחור, אלא אפור כהה (slate-900, slate-950) שנותן תחושת עומק בלי לצרוב את העיניים.
• צבעי טקסט — לא לבן, אלא אפור בהיר (slate-100, slate-200) שקריא בלי להיות בוהק.
• צבעי הדגשה — הגרדיאנטים נשארו, אבל עם saturated יותר על רקע כהה כי הצבעים נראים "דהויים" על רקע כהה.
• גבולות וצלליות — במצב כהה, גבולות בהירים עדינים (white/10) מחליפים צלליות כי צלליות כמעט לא נראות על רקע כהה.

הבעיה הכי מעצבנת: FOUC (Flash of Unstyled Content)

גם אחרי שהעיצוב הכהה עבד, נתקלתי ב-FOUC — כשנכנסים לאתר, לשבריר שנייה רואים את הגרסה הבהירה ואז היא "קופצת" לכהה. זה קורה כי ה-JavaScript שבודק את ההעדפה ב-localStorage רץ אחרי שה-HTML כבר נטען.

הפתרון: סקריפט inline קטן ב-<head> (לפני שהדפדפן מתחיל לצייר) שבודק את ההעדפה ומוסיף את הקלאס dark מיד. ככה הדפדפן כבר מצייר את הגרסה הנכונה מההתחלה.

כפתור ה-Toggle

הכפתור עצמו פשוט: אייקון שמש/ירח שמתחלף עם אנימציה קלה. אבל היה חשוב לי שהוא:

• ישמור את הבחירה ב-localStorage
• יכבד את העדפת המערכת (prefers-color-scheme: dark) כברירת מחדל
• יעבוד בלי JavaScript (הגרסה הבהירה כ-fallback)
• לא ייצור FOUC

מה למדתי

• תתכננו Dark Mode מההתחלה — הוספה בדיעבד זה פי 5 יותר עבודה.
• אל תהפכו צבעים — תתכננו אותם — כל ערכת צבעים צריכה תכנון עצמאי.
• בדקו ניגודיות — השתמשתי ב-Chrome DevTools לבדוק שכל צירוף צבעים עומד ב-WCAG AA לפחות.
• אל תשכחו את הגרדיאנטים — גרדיאנט שנראה מדהים על לבן יכול להיעלם על רקע כהה.