לאחר עדכון iOS לנושא כהה, חצי מהכפתורים הופכים לבלתי קריאים, ובאנדרואיד האפליקציה קורסת בעת מעבר בין נושאים? זהו מצב מוכר אם הצבעים מקודדים בצורה קשיחה. אנו מיישמים נושא כהה עם מעבר אוטומטי, טוקנים סמנטיים וניגודיות WCAG AA. הניסיון שלנו מראה שיישום נכון מגדיל את שימור המשתמשים ב-20–30%, בעוד שטעויות בנושא הכהה הורסות את חוויית האפליקציה.
איך לא לעשות את זה: היפוך וצבעים מקודדים
הטעות הראשונה והיקרה ביותר היא שימוש בצבעים מקודדים במקום בטוקנים סמנטיים. Color.white, #FFFFFF, UIColor(red:1 green:1 blue:1 alpha:1) — כל אלה נשברים בעת מעבר בין נושאים. תיקון מאוחר יותר פירושו שכתוב של כל רכיבי הממשק.
הגישה הנכונה היא טוקנים סמנטיים: background.primary, text.secondary, surface.elevated, accent.default. ב-iOS אלה UIColor.systemBackground, UIColor.label, UIColor.secondaryLabel וצבעים מותאמים אישית דרך Asset Catalog עם גרסאות Light ו-Dark. באנדרואיד — Material Design 3 עם colorScheme עד MaterialTheme.colorScheme.surface, onSurface, surfaceVariant. ב-Flutter: ThemeData.light() ו-ThemeData.dark() עם סט מלא של ColorScheme, מעבר דרך MaterialApp(themeMode: ...). ב-React Native: ה-hook useColorScheme() מהליבה + Appearance.getColorScheme() לאתחול.
למה טוקנים סמנטיים הם הגישה הנכונה היחידה?
טוקנים סמנטיים מאפשרים לשנות את הנושא באופן מרכזי ללא עריכה של כל מסך. השוואה: עם קידוד קשיח, שינוי צבע הרקע דורש חיפוש והחלפה של 50+ מופעים. עם טוקנים, משנים את הערך של משתנה אחד. זה מהיר פי 5 ומבטל שגיאות. לפי Apple HIG, שימוש בצבעי מערכת וטוקנים סמנטיים הוא חובה למעבר ביקורת (סעיף 4.2).
| גישה | זמן לשינוי צבע | סיכון לשגיאות | גמישות |
|---|---|---|---|
| קידוד קשיח | 30–60 דקות (50+ עריכות) | גבוה | נמוכה |
| טוקנים סמנטיים | 2–5 דקות | נמוך | גבוהה |
אילו כללים יש לעקוב אחריהם עבור פלטה כהה?
נושא כהה הוא לא רק רקע כהה. הנה הכללים המרכזיים שמופרים לרוב.
הגבהה באמצעות הבהרה, לא צללים
ב-Material Design 3, משטחים ברמות z-index שונות בנושא כהה נבדלים בבהירות: ככל שגבוה יותר, כך בהיר יותר. surface → surfaceContainer → surfaceContainerHigh. צללים כמעט בלתי נראים בנושא כהה — הם מוחלפים בהפרדה טונאלית.
ניגודיות טקסט
WCAG AA דורש לפחות 4.5:1 לטקסט רגיל. לבן #FFFFFF על כהה #121212 = 18.1:1 — גבוה מדי, מאמץ את העיניים. אופטימלי #E0E0E0 על #121212 = 14.7:1. Google ממליצה על #FFFFFF עם אטימות של 87% לטקסט ראשי.
| סוג טקסט | ניגודיות מינימלית (WCAG AA) | יעד בנושא כהה |
|---|---|---|
| טקסט רגיל | 4.5:1 | 14:1 |
| טקסט גדול (>=18pt) | 3:1 | 7:1 |
| אלמנטים מודגשים | 3:1 | מותאם |
צבע מודגש
צבעים מודגשים רבים בנושא כהה דורשים רוויה מופחתת והבהרה קלה. כחול בהיר #2196F3 על רקע כהה רוטט וגורם לאי נוחות. #90CAF9 הוא הגרסה הנכונה לנושא כהה.
תמונות ואיורים
תמונות לא משתנות. איורים עם רקע לבן הם בעיה. פתרון: איורי SVG עם רקע שקוף וצבעים אדפטיביים דרך currentColor.
מעבר דינמי
iOS מגרסה 13 תומך ב-traitCollectionDidChange — המערכת מודיעה אוטומטית על שינוי נושא. SwiftUI מצייר מחדש עם @Environment(\.colorScheme). UIKit דורש override func traitCollectionDidChange מפורש. אנדרואיד: AppCompatDelegate.setDefaultNightMode() למעבר תוכנתי. נושא DayNight ב-styles.xml. Activity מופעל מחדש בעת שינוי נושא — יש לשמור מצב דרך ViewModel או onSaveInstanceState.
מקרה קצה חשוב: המשתמש משנה את הנושא בהגדרות המערכת בזמן שהאפליקציה ברקע. כשחוזרים לחזית, האפליקציה חייבת להחיל את הנושא החדש ללא הבהוב מורגש. באנדרואיד זה recreate() activity או configChanges: uiMode במניפסט עם טיפול ידני.
בדיקת נושא כהה
שלוש רמות: Figma (כל הרכיבים עם גרסאות בהיר/כהה דרך Figma Variables), סימולטור/אמולטור (מעבר דרך הגדרות מהירות), מכשיר פיזי במצב OLED (iPhone 12+, Samsung Galaxy) — בדיקת שחור "טהור", היעדר אפקט הילה סביב אלמנטים בהירים. כלים: Xcode Accessibility Inspector לבדיקת ניגודיות, Android Accessibility Scanner. בדקו את כל המסכים, כל המודאלים, כל ההתראות — הם משתמשים לרוב בצבעי מערכת ונשברים ראשונים.
מה כלול בעבודה
- ביקורת קוד קיים (איתור כל הצבעים המקודדים)
- המרת צבעים לטוקנים סמנטיים
- יצירת פלטה כהה במערכת העיצוב (Figma Variables + קוד)
- יישום מעבר נושא דינמי
- בדיקת ניגודיות וקריאות (WCAG AA)
- תיעוד שימוש בטוקנים ותמיכה במהלך השחרור
לוחות זמנים משוערים
| יישום | לוח זמנים |
|---|---|
| חדש, טוקנים מההתחלה | 2–3 ימים |
| קיים, דורש רפקטורינג צבעים | 3–5 ימים |
| מורכב, רכיבים מותאמים רבים | 5–7 ימים |
העלות מחושבת באופן אישי לאחר ביקורת הפרויקט. אם אתם רוצים ליישם נושא כהה עם אחריות לאיכות, צרו קשר — נעריך את הפרויקט שלכם. מעל 5 שנות ניסיון ו-50+ פרויקטים מיושמים בפיתוח מובייל. הזמינו יישום נושא כהה וקבלו ייעוץ.