Dark mode (מצב כהה) באתר הוא גרסה של העיצוב עם רקע כהה וטקסט בהיר, שמוצגת לגולשים שבחרו בהעדפה הזו במכשיר או בדפדפן שלהם. הדפדפן חושף את ההעדפה הזו לאתר דרך תכונת ה-CSS prefers-color-scheme, ואתר שתומך בה יכול להחליף צבעים אוטומטית — בלי שהגולש יצטרך ללחוץ על כלום.
איך זה עובד טכנית
לפי התיעוד של MDN, prefers-color-scheme מקבלת אחד משני ערכים: light — הגולש מעדיף מצב בהיר או לא הביע העדפה, ו-dark — הגולש מעדיף מצב כהה. ההעדפה מגיעה מהגדרות מערכת ההפעלה או הדפדפן.
הדרך הנקייה לממש את זה היא עם משתני צבע: מגדירים את הצבעים פעם אחת, ומגדירים אותם מחדש למצב כהה:
:root {
--bg: #FFFFFF;
--text: #1D1D1D;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1D1D1D;
--text: #F2F2F2;
}
}
body { background: var(--bg); color: var(--text); }
MDN מפנה גם למאפיין CSS color-scheme ולתגית <meta name="color-scheme">, שאומרים לדפדפן באילו סכמות האתר תומך — כך גם רכיבים מובנים כמו שדות טופס ופסי גלילה מוצגים בצבעים המתאימים.
זו עוד סיבה להגדיר את פלטת הצבעים כמשתנים מההתחלה: באתר שבו הצבעים מפוזרים בתוך מאות כללים, מצב כהה הוא פרויקט; באתר עם משתנים — זו הגדרה של כמה שורות, ועוד בדיקות.
מתי זה שווה את המאמץ
| כדאי | פחות דחוף |
|---|---|
| מערכות ואפליקציות ווב שעובדים בהן שעות | אתר תדמית שגולשים בו כמה דקות |
| אתרי תוכן ארוך, תיעוד, בלוגים טכניים | דפי נחיתה לקמפיין |
| קהל טכנולוגי שמשתמש במצב כהה הרבה | אתר שכבר מעוצב בצבעים כהים |
באתר של עסק קטן, מצב כהה הוא בדרך כלל "נחמד שיש", לא דרישה. מה שכן חשוב תמיד: שהאתר יהיה קריא — בכל מצב שבו הוא מוצג.
מה צריך לבדוק במצב כהה
- ניגודיות. אותן דרישות של WCAG חלות גם כאן: 4.5:1 לטקסט רגיל. אפור כהה על שחור נכשל בדיוק כמו אפור בהיר על לבן.
- לא שחור מוחלט ולבן מוחלט. רבים מעדיפים רקע אפור-כהה וטקסט לבן-שבור, שמעייפים פחות את העין.
- לוגו ותמונות. לוגו כהה על רקע שקוף נעלם על רקע כהה — צריך גרסה בהירה.
- צבעי מותג. צבע שעבד על לבן לא תמיד עובד על כהה, ולהפך.
- צללים ומסגרות. צל שמפריד כרטיסים ברקע בהיר לא נראה ברקע כהה; לעיתים צריך מסגרת עדינה במקומו.
- תוכן מוטמע. מפות, סרטונים, טפסים חיצוניים — לא תמיד מתאימים את עצמם.
- גרפים ואיורים עם רקע לבן "קשיח".
אוטומטי, מתג, או שניהם
אפשר לכבד את העדפת המערכת אוטומטית, להוסיף מתג ידני, או לשלב: ברירת מחדל לפי המערכת, ומתג שמאפשר לשנות ונשמר לביקור הבא. מתג ידני מוסיף מורכבות — צריך לשמור את הבחירה, ולמנוע "הבהוב" של הצבע הלא נכון בטעינה. לרוב האתרים העסקיים, כיבוד העדפת המערכת לבדה מספיק.
אתר שמעוצב כהה מלכתחילה
יש אתרים שהעיצוב שלהם כהה כחלק מהזהות — כמו האתר הזה, שבנוי על רקע כהה עם צבע הדגשה ירוק-ליים. במקרה כזה אין "מצב כהה" נפרד; מה שחשוב הוא שהצבעים עצמם עומדים בדרישות הניגודיות ושהאתר קריא גם באור שמש חזק בטלפון.
מצב כהה הוא לא תחליף לנגישות
לעיתים מציגים מצב כהה כפתרון ל"עייפות עיניים" או לנגישות. זה לא מדויק: מצב כהה הוא העדפה, ולחלק מהאנשים דווקא קשה יותר לקרוא טקסט בהיר על רקע כהה. מה שנגישות דורשת הוא ניגודיות מספקת, טקסט שאפשר להגדיל, ותמיכה בהגדרות שהמשתמש קבע במערכת — כולל מצבי ניגודיות גבוהה שקיימים במערכות הפעלה מסוימות, שבהם הדפדפן מחליף את הצבעים של האתר בצבעי המערכת.
אתר שבנוי נכון ממשיך לעבוד גם במצבים כאלה: כפתורים עם גבול ולא רק צבע רקע, אייקונים שמקבלים את צבע הטקסט, ומידע שלא מועבר רק בצבע. ראו גם הנגשת אתר וורדפרס.
איך בודקים מצב כהה
לא צריך להחליף את הגדרות המחשב כדי לבדוק: כלי הפיתוח של הדפדפנים המרכזיים מאפשרים לדמות את ההעדפה prefers-color-scheme: dark. כדאי לעבור כך על כל תבנית עמוד — דף בית, עמוד שירות, מאמר, טופס — ולבדוק במיוחד תמונות, לוגו, טבלאות ותוכן מוטמע. ואחרי זה, לבדוק גם בטלפון אמיתי שמוגדר למצב כהה.
שאלות נפוצות
האם מצב כהה משפיע על גוגל?
לא באופן ישיר. מה שחשוב לגוגל ולגולשים הוא שהתוכן נגיש וקריא, ושהאתר יציב ומהיר — כולל בלי קפיצות צבע בטעינה.
האם מצב כהה חוסך סוללה?
במסכים מסוימים יש לכך השפעה, אבל זה תלוי במכשיר ובתוכן — ולא סיבה מספיקה לבדה לפתח מצב כהה לאתר עסקי.
אפשר להוסיף מצב כהה לאתר קיים?
כן, אבל המאמץ תלוי במבנה הקוד. באתר שנבנה עם בונה עמודים וצבעים קבועים בכל עמוד, זה עלול להיות כמעט בנייה מחדש של העיצוב. ראו רענון או בנייה מחדש.
אני בונה את הצבעים בכל אתר כמשתנים, כך שהרחבות כמו מצב כהה אפשריות בלי לשבור את העיצוב. ראו בניית אתרים מתקדמים, או ספרו לי מה אתם צריכים.
אהבתם את המאמר?
