לאט לאט, הדארק-מוד משתלט על האינטרנט. יותר ויותר תוכנות ומוצרים מבינים שבשביל לשפר את ה-UX הם חייבים להתאים את העיצוב של המוצר/אתר/אפליקציה לשני שיטות: Light mode & Dark mode.
What a time to be alive.
עריכה: לפוסט עשיתי ארגון מחדש, הוא מחולק לפי 3 השיטות שציינתי יחד עם סרטוני הדרכה ייעודים. בהמשך אני מרחיב על התהליך ההיכרות והאובססיה שלי ל-Darkmode כצורך בריאותי.
בהתחלה, לא הייתי מסוגל לראות מסך שחור וטקסט לבן, לפני כמה שנים, רוב הזמן הייתי מבלה בפייסבוק ובטוויטר, והכל היה במצב ברירת מחדל של רקע לבן ועיצוב ברירת המחדל.
אני זוכר שניסיתי לפתוח דארק-מוד בטוויטר, חשכו עיניי (literally) ואמרתי לעצמי שאין מצב שזה נוח, זה היה נורא. אחרי כ-10 דקות ניסיון (שהיו אולי 5 דקות בלחץ) החזרתי חזרה את הטוויטר למצבו הבהיר הרגיל.
HTML
השיטה הראשונה להציג Dark Mode תהיה ישירות בתוך ה-HTML בתגית meta.
<meta name="color-scheme" content="dark light">קווין פאוול יצר סרטון ייעודי לשיטת ה-Darkmode ב-HTML. יחד עם היתרונות והחסרונות שמגיעות עם השיטה הזו.
Javascript Toggle Darkmode
בשיטה השניה אפשר להשתמש ב-Javascript, שמירה ב-Cookie את התיעדוף של הלקוח, ולעצב כפתור Switcher ייעודי שיתאים למיתוג האתר בשביל להנגיש Light Mode & Dark Mode.
מצרף סרטון הדרכה ייעודי של אדי באנגלית שמעביר הדרכה מלאה בנושא:
Darkmode using CSS Only
במרדף תמידי שלי להשתפרות וצריכת תוכן, בחודשים האחרונים אני משתף יותר ויותר אנשים שכותבים בלוגים מעניינים שאני נהנה לקרוא אותם, אך לפעמים קשה לי לקרוא בטלפון עם מסך לבן. לאנשי הלילה בינינו זה עוד יותר קשה לראות מסך לבן בשעות הלילה.
היכרות עם Media Query
את ההיכרות שלי עם המדיה קווארי הכרתי במקרה בערוץ יוטיוב שאני נהנה ללמוד CSS ממנו, הערוץ יוטיוב של Kevin Powell, למי שמעוניין להכיר טריקים ושטיקים של CSS, זה הערוץ. נסו לראות מה יוטיוב תציע לכם לראות ב-Suggested אחרי כמה סרטונים של קווין ומשם להיכנס לעולם מדריכי ה-CSS שאנשים אחרים צילמו.
הסרטון של קווין שלמדתי להשתמש בדארק מוד עם כמה שורות של CSS:
Media Query: Prefers-color-scheme: dark
Prefers-color-scheme זוהי מדיה קוורי המאפשרת להנגיש את עיצוב האתר והצבעים באתר לפי Light or Dark
כך שבעצם, אם יש אינדיקציה של דארק, לכל מי שיש חוויית גלישה של דארק מוד, יראה את העיצוב של color scheme Dark לעומת Light או אפילו אם אין שום אזכור ל-Light – אז זה יציג את האתר בברירת המחדל.
קוד CSS קצר רק לתוכן הפוסט (משתמשי אלמנטור)
התחלתי לשלוח לכותבי בלוג אחרים את שורות ה-CSS עם הרקע הכהה וטקסט לבן. טירגטתי רק את אזור התוכן של הפוסט באלמנטור, על מנת לא להיכנס לבור ללא תחתית של עיצוב והתאמת כל האתר שלהם לדארק מוד.
בעצם, טעימה מהדארק מוד, עם CSS נוח להטמעה ואין שום שינוי לעין אם אנשים משתמשים ב-light color scheme בחוויית הגלישה שלהם באתר או בקריאת הפוסטים.
שימו לב בבקשה, שכל אתר הוא שונה, ויהיה צריך לעשות התאמות שונות בהתאם לעיצוב באתרכם.
הקוד הפשוט שאני משתף עם אחרים:
@media (prefers-color-scheme: dark) {
.elementor-widget-theme-post-content {
background-color: rgb(31, 31, 31);
--e-global-color-text: rgb(191, 191, 191);
}
.elementor-widget-theme-post-content a {
color: rgb(191, 191, 191);}
}
כמובן שניתן להתאים ולשפצר אותו כאוות נפשכם. הצבעים הם בחירה אישית שלי, תרגישו בנוח להתאים את הצבעים אליכם.
ממליץ לא להשתמש בשחור מוחלט או לבן מוחלט בדארק מוד.
לאן להכניס את הקוד?
עדיף להכניס את הקוד למקום שתזכרו איפה שמתם אותו בעוד חצי שנה.
אופציה נוחה, היא להכניס את הקוד בתבנית הפוסטים שלכם (Post Template) ב-CSS מותאם אישית.
אם הנכם משתמשים בתוסף סניפטים שמאפשר להכניס קוד CSS על פי התניות ועמודים, לכו על זה.
לאנשים שלא משתמשים באלמנטור בשביל לבנות את האתר שלכם, אתם כנראה תשתמשו בתגיות HTML כמו <article> או שיהיה <div> עוטף עם קלאס ייעודי – אותו תצטרכו לתפוס ולהכיל עליו את ה-Media Query.
מה התמיכה של prefers-color-scheme?
נכון לתאריך של כתיבת הפוסט, ה-Media Query prefers-color-scheme נתמכת בצורה רחבה בכל הדפדפנים של האינטרנט
קיימת תמיכה גלובלית של 94.79% עם הערה חשובה: התמיכה בהעדפה של color scheme תלויה במכשיר אם הוא עצמו תומך בהעדפה של theme בהיר או כהה.
תהליך ההיכרות שלי עם Dark Screens
בהתחלה, לא הייתי מסוגל לראות מסך שחור וטקסט לבן, לפני כמה שנים, רוב הזמן הייתי מבלה בפייסבוק ובטוויטר, והכל היה במצב ברירת מחדל של רקע לבן ועיצוב ברירת המחדל.
אני זוכר שניסיתי לפתוח דארק-מוד בטוויטר, חשכו עיניי (literally) ואמרתי לעצמי שאין מצב שזה נוח, זה היה נורא. אחרי כ-10 דקות ניסיון (שהיו אולי 5 דקות בלחץ) החזרתי חזרה את הטוויטר למצבו הבהיר הרגיל.
מאז עברו כמה שנים, הפסקתי לעכב את התהליך, התפתחתי והתחלתי להתעסק בעבודה הכוללת פעילות מרובה מול מחשב.
הראייה קצת הלכה לה והחלטתי שאני חייב לנסות לפחות את הגלילה (האינסופית) בנייד בפייסבוק עם דארק-מוד.
הדקות הראשונות היו לא נוחות, אבל הפלא ופלא, השלב הראשוני של אי-נוחות עבר, העיניים הסתגלו, והרטינות הודו לי.
מפה לשם, יצאתי לבדיקה והתנסות באפליקציות השונות ואתרים שונים, להחליף את התצוגה לדארק-מוד.
ישיבה ממושכת מול מחשב גרמה לי להבין שאני לא יכול יותר להסתכל על מסך עם רקע בהיר. אני חייב Full Dark mode, בשביל הראייה שלי ונוחות הקריאה הממושכת.
גיליתי שבפלאפון הישן שלי (Galaxy S8+) אין גרסת דארק מוד ל-Gmail כי הפלאפון שלי לא "חדיש" מספיק. למרות שהוא שימושי והבטריה כמעט שורדת, החלטתי שחייבים להתחדש עם פלאפון שגם הוא יתמוך בדארק מוד.
עם הנבירה באינטרנט גיליתי עוד ועוד אופציות לדארק מוד. למכורים לדארק מוד שאיתי, ידעתם שאין ל-Google docs ועוד מלא אתרים דארק מוד מובנה? בושה, נכון?
פתרון שמצאתי לאתרים שעדיין לא מנגישים דארק מוד
למשתמשי כרום, התוסף Night Eye פשוט בגדר חובה.
אני לא יכול לתאר את הנוחות שיש לי במצב דיפולט לראות, לקרוא ולכתוב תוכן בדארק מוד גם באתרים שלא מובנה אצלם ככה (כן גוגל-פייסבוק ומוצריה, מסתכל עליכם! לטיפולכם!)
*ביזנס מנג'ר וגוגל אדס – שכרגע אין להם עדיין תמיכה בדארק מוד.
Night Eye מאפשרת בצורת נייטיב להפוך את המסך למצב כהה, עם טקסט קריא ואפילו היפוך צבעים לצורך העיצוב.
3 חודשי התנסות חינם בפרימיום. האופציה החינמית מאפשרת עד 5 אתרים להחיל עליהם דארק מוד.
יש עלות חד פעמית ל-40$ ל-10 דפדפני אינטרנט.
ממליץ להתנסות, ואחרי 3 חודשים לקנות אם מתאים לכם.
כמובן ששימו לב, עם כל תוסף לכרום שאתם מטעינים באתר, מהירות טעינת האתר תהיה איטית יותר.
לאתרים שאני יושב לא מעט זמן עליהם, כמו לדוגמה ה-FB Ads Manager או Google Ads – זה פשוט בגדר חובה אצלי.
למעוניינים בעוד תוספי כרום – כתבתי פוסט ייעודי להמלצות נוספות על תוספים נחמדים לכרום.
תוסף וורדפרס שתומך ב-דארק מוד
ל-Night Eye יש תוסף וורדפרס, לא יצא לי להתנסות איתו, אך שימו לב בבקשה לתאריך העדכון האחרון של התוסף, יכול להיות שאין בו תמיכה יותר ונראה שהוא לא בשימוש יותר.
תוסף שאני בוחן לאחרונה נקרא WP Dark Mode – אני משתמש בו לכתיבת הפוסטים בבלוג כאן בממשק של וורדפרס, שיהיה לי נוח יותר לכתוב.
יצירת CSS Dark Mode עבור דפי אינטרנט שלכם בעזרת התוסף Night Eye
Night Eye מציעה גם לג’נרט לכם CSS לדף אינטרנט שלכם.
מבדיקה שערכתי, זה מייצר קובץ לא קטן (566KB) של כל ה-CSS שנטען בעמוד וממיר אותו.
לצערי מהבדיקה שעשיתי על דף פוסט שקראתי, זה עשה חצי עבודה טובה וחצי עבודה ללא פתרון כמו לדוגמה אייקונים שהם לא SVG. בהשוואה לתוסף לכרום, שהנגיש את דף האינטרנט למצב קריא במצב Dark Mode.
המסקנה: זה נחמד, אפשר להעתיק משם כמה פיסות קוד, אבל רוב רובו של הקוד יכול לא להתאים לכם.
לדוגמה: טעינת כל ה-CSS במצב כהה של Woocommerce בעמוד פוסט שאין בו מכירת מוצר או וידג'ט של ווקומרס, הופך חלק נכבד מה-CSS ללא רלוונטי.
החסרון של התוסף לכרום Night Eye
חיסרון מהותי שישנה פגיעה בצד העיצובי של האתר – לא כל היפוך צבעים הוא באמת טוב, ולפעמים זה הופך איזורים ללא קריאים מכיוון שיש רקע גרדיאנט כזה ואחר, ניגודיות הצבעים מראש אינה טובה בבחירתה ולכן גם במצב דארק מוד נוכל לפספס אזור שלם שלא באמת נגיש לקריאה.
לפעמים גם אייקונים יהיו בצבע שנבלע עם הרקע.
במקרה כזה נרצה לבדוק באתרים חדשים שאנחנו מבקרים בהם, איך הם נראים במצב בהיר.
לפעמים יהיו אתרים שאנחנו נרצה לבדוק אותם במצב בהיר קודם, קצת "לשרוף לעצמנו את העיניים", להבין ששווה לחזור במהירות למצב ברירת מחדל: עם דארק מוד פעיל.
למי שקורא את השורות האלו, מקווה שהצלחתי להעביר את החשיבות ש-Night Eye זה בעצם עוד כלי שישדרג את חייכם (איך הוא אוהב להגזים), ניתן לשלם את ה-40$ בתשלום חד פעמי, אך שימו לב: הקבלה שמתקבלת מ-Stripe, לא מגיעה עם השם שלכם או של העסק, אם משנה לכם.
אופציה נוספת, היא לבדוק אם המבצע עדיין קיים ב Appsumo ב-30$. אותן ההגדרות והגבלות (10 דפדפנים) אך ב-10$ פחות.
מובייל וגוגל כרום
גוגל כרום שחררה פיצ'ר נוח שמאפשרת לבחור באיזה theme אנחנו מעוניינים לגלוש.
מה שמאפשר להתאים לכל אתר Dark theme בהתאם לחוקיות של גוגל (עושה עבודה טובה יש לציין), לא יצא לי להיתקל בבעיות נגישות, למעט בטקסט על רקע מסוג Gradient – ששם ה-Dark mode נאבד בקלות עם טקסט בצבע לבן על בסיס רקע של גרדיאנט משתנה או ספק משתנה ולא בהלימה עם ניגודיות צבעים.
ניתן לקרוא על הפיצ'ר בעמוד של גוגל: Browse in Dark mode or Dark theme – בעמוד זה יש שלושה טאבים, לאייפון, לאנדרואיד ולמחשב. על בסיס המכשיר שלכם יפתח הטאב המותאם הראשון.
במכשירי ווינדוס ומקבוק – יש להפעיל את הגדרת ה-dark theme בהגדרות של המחשב.
במכשירי אייפון ישנה תמיכה ב-Dark theme החל מ-IOS 13 ומעלה.
במכשירי אנדרואיד, ניתן להגדיר את זה ישירות באפליקציה של כרום, בהגדרות > תבניות ולבחור אם תרצו system default/dark/light.
סיכום:
מקווה שעזרתי לכם לדייק עוד טיפה את חוויית הגלישה באתרכם. היכרות קטנה עם שיטות עבודה שונות וכמובן להחדיר את המחשבה על שימוש ב-Darkmore כחשיבה בחויית גלישה מותאמת יותר לגולשים בפרויקטים שלכם.
אחת המטרות שלי בעתיד היא להנגיש את עיצוב הבלוג בהתאם ל-prefered color scheme של הדפדפן שלכם.
ספרו לי אם אתם מתכוונים להטמיע את זה באתרכם או איך התאמתם את האתר שלכם לדארק מוד.
לקריאה מעמיקה יותר בנושא:
- Implement Dark Mode On Your Website – Dev.to
- A Complete Guide to Dark Mode on the Web – CSS Tricks
