העדפת ערכת צבעים: שלום חושך, חבר שלי

עמוסים מדי או לצורך? כאן אפשר לקרוא את כל המידע על מצב כהה ואיך לתמוך בו לטובת המשתמשים.

מבוא

מצב כהה לפני מצב כהה

מסך מחשב עם מסך ירוק
מסך ירוק (מקור)

שיפרנו את המצב הכהה. בתחילת המחשוב האישי, המצב הכהה לא היה עניין של בחירה, אלא עובדה: צגי CRT מונוכרומטיים שמופעלים על ידי ירי של קורות אלקטרוניות על מסך זרחני, והזרחן ששימש בשלבי ה-CRT המוקדמים היה ירוק. מאחר שהטקסט הוצג בירוק ושאר המסך היה שחור, המודלים האלה נקראות לעיתים קרובות מסכים ירוקים.

עיבוד תמלילים בצבע כהה ללבן
כהה על לבן (מקור)

בהמשך, ב-צבעי ה-CRT שנוספו, הוצגו מספר צבעים באמצעות השימוש בזרחנים אדומים, ירוקים וכחולים. הם יצרו לבן על ידי הפעלת כל שלושת הזרחנים בו-זמנית. עם התפתחותו של WYSIWYG מתוחכם יותר פרסום במחשב, הרעיון להפוך את המסמך הווירטואלי לדומה לגיליון נייר פיזי הפך לפופולרי.

דף אינטרנט כהה על לבן בדפדפן WorldWideWeb
דפדפן WorldWideWeb (מקור)

כאן התחילה טרנד בעיצוב כהה על לבן, והמגמה הזו הועברה אינטרנט מבוסס-מסמכים. הדפדפן הראשון אי פעם, WorldWideWeb (חשוב לזכור, שירות CSS עדיין לא הומצא). הציגו דפי אינטרנט באופן הזה. עובדה משעשעת: הדפדפן השני בעולם, הדפדפן במצב קו – דפדפן מבוסס טרמינל – היה ירוק על רקע כהה. כיום, דפי אינטרנט ואפליקציות אינטרנט מעוצבים בדרך כלל באמצעות טקסט כהה על רקע בהיר, ההנחה הבסיסית שהיא גם מקודדת באופן קשיח בגיליונות של סגנונות של סוכני משתמש, כולל של Chrome.

סמארטפון בשימוש בזמן ששוכבים במיטה
הסמארטפון שנעשה בו שימוש במיטה (מקור: Unspark)

ימי ה-CRT חלפו. הצריכה והיצירה של תוכן עברו למכשירים ניידים שמשתמשים ב-LCD עם תאורה אחורית. או במסכים של AMOLED חסכוניים באנרגיה. מחשבים, טאבלטים וסמארטפונים קטנים יותר וניידים יותר הובילו לדפוסי שימוש חדשים. משימות לשעות הפנאי, כמו גלישה באינטרנט, תכנות בשביל הכיף ומשחקים מתקדמים נפוצים אחרי שעות הפעילות בסביבות חשוכות. אנשים אפילו נהנים מהמכשירים שלהם במיטות שלהם בשעות הלילה. ככל שיותר אנשים משתמשים במכשירים שלהם בחושך, כך הרעיון של חזרה לשורשים של בהיר בחושך הופך לפופולרי יותר.

למה כדאי להשתמש במצב כהה

מצב כהה מסיבות אסתטיות

כשאנשים שואלים שאלות למה הם אוהבים או רוצים מצב כהה, התגובה הכי פופולרית היא ש"זה קל יותר לעיניים". ולאחר מכן "it's אלגנטיים ו-יפים". אפל מסמכי התיעוד למפתחים בנושא מצב כהה כותבת במפורש: "בחירה אם לאפשר מראה בהיר או כהה הוא אסתטיקה עבור רוב המשתמשים, ויכול להיות שלא קשור לתנאי התאורה בסביבה".

CloseView ב-Mac OS System 7 עם
System 7 CloseView (מקור)

מצב כהה ככלי נגישות

יש גם אנשים שלמעשה צריכים מצב כהה ומשתמשים בו ככלי נגישות נוסף, לדוגמה, משתמשים עם ליקויי ראייה. המופע המוקדם ביותר של כלי נגישות כזה שמצאתי הוא התכונה CloseView ב-System 7, עם מתג עבור שחור על לבן ולבן על שחור. למרות שהצבע של מערכת 7 נתמך, ממשק המשתמש שהוגדר כברירת מחדל עדיין היה בשחור-לבן.

ההטמעות האלה, שמבוססות על היפוך, הראו את נקודות החולשה שלהן אחרי שהתחילו להשתמש בצבע. מחקר על התנהגות משתמשים מאת Szpiro et al. on איך אנשים עם ליקויי ראייה יכולים לגשת למכשירים מחשוב הראו שכל המשתמשים שרואיינו לא אהבו תמונות הפוכות, אבל העדיפו טקסט בהיר על רקע כהה. Apple מתאימה להעדפת המשתמש הזו באמצעות תכונה בשם Smart Invert, שהופך את הצבעים במסך, למעט תמונות, מדיה, ואפליקציות מסוימות שמשתמשות בסגנונות צבעים כהים.

צורה מיוחדת של ליקויי ראייה היא 'תסמונת הראייה הממוחשבת', שנקראת גם 'מאמץ עיניים דיגיטלי', מוגדר בתור "השילוב של בעיות עיניים וראייה שקשורות לשימוש במחשבים (כולל מחשבים, מחשבים ניידים וטאבלטים) ובמסכים אלקטרוניים אחרים (למשל, סמארטפונים ומכשירי קריאה אלקטרוניים)." הוצעו כי השימוש של מתבגרים במכשירים אלקטרוניים, במיוחד בשעות הלילה, מוביל לסיכון מוגבר למשך זמן שינה קצר יותר, זמן אחזור ארוך יותר בזמן השינה ועלייה בחוסר השינה. בנוסף, החשיפה לאור כחול נצפתה מדווח להיות מעורבים ברגולציה של הקצב היומיומי ואת מחזור השינה, וסביבות אור לא סדירות עלולות להוביל מחסור בשינה, שעלולות להשפיע על מצב הרוח ועל ביצועי המשימות, במחקר שנערך על ידי רוזנפילד. כדי להגביל את ההשפעות השליליות האלה, עליך לכוונן את טמפרטורת הצבעים של המסך כדי לצמצם את האור הכחול באמצעות תכונות כמו iOS משמרת לילה או Android תאורת לילה יכולה לעזור, וגם הימנעות מאורות בהירים או מאורות לא סדירים באופן כללי באמצעות עיצובים כהים או מצבים כהים.

חיסכון בסוללה במצב כהה במסכי AMOLED

לסיום, ידוע שמצב כהה חוסך הרבה אנרגיה מסכי AMOLED. מקרים לדוגמה ב-Android שמתמקדים באפליקציות פופולריות של Google כמו YouTube הראו שהחיסכון בסוללה יכול להגיע עד 60%. בסרטון שלמטה יש פרטים נוספים על המקרים לדוגמה האלה ועל החיסכון בחשמל לכל אפליקציה.

הפעלת מצב כהה במערכת ההפעלה

אחרי שהסברתי למה המצב הכהה הוא דבר חשוב מאוד למשתמשים רבים, בואו נראה איך תוכלו לתמוך בו.

הגדרות מצב כהה של Android Q
הגדרות העיצוב הכהה של Android Q

מערכות הפעלה שתומכות במצב כהה או בעיצוב כהה בדרך כלל יש אפשרות להפעיל אותו במקום כלשהו בהגדרות. ב-macOS X הקטע נמצא בקטע כללי של העדפת המערכת ונקרא מראה (צילום מסך). וב-Windows 10 היא מופיעה בקטע צבעים ונקראת בחירת הצבע (צילום מסך). ב-Android Q, ניתן למצוא אותו בקטע תצוגה כמתג עבור עיצוב כהה (צילום מסך), וב-iOS 13, אפשר לשנות את המראה בתפריט תצוגה בהירות בקטע ההגדרות (צילום מסך).

שאילתת המדיה prefers-color-scheme

נסיים בתיאוריה לפני שנצא לדרך. שאילתות מדיה מאפשרים למחברים לבדוק ערכים או תכונות של סוכן המשתמש או של המכשיר או לשלוח שאילתות לגביו, ללא תלות במסמך שעובר רינדור. נעשה בהם שימוש בכלל @media של CSS כדי להחיל סגנונות באופן מותנה על מסמך, ובמגוון הקשרים ושפות אחרים, כמו HTML ו-JavaScript. רמה 5 של שאילתות מדיה מציג תכונות מדיה שנקראות 'העדפות משתמשים', דרך שבה אתרים יכולים לזהות את הדרך המועדפת של המשתמש להציג תוכן.

prefers-color-scheme תכונת מדיה משמשת לזיהוי אם המשתמש ביקש שהדף יהיה בעיצוב כהה או בהיר. התכונה פועלת עם הערכים הבאים:

  • light: מציין שהמשתמש הודיע למערכת שהוא מעדיף דף בעיצוב בהיר (טקסט כהה על רקע בהיר).
  • dark: מציין שהמשתמש הודיע למערכת שהוא מעדיף דף בעיצוב כהה (טקסט בהיר על רקע כהה).

תמיכה במצב כהה

איך בודקים אם הדפדפן תומך במצב כהה

מאחר שמצב כהה מדווח באמצעות שאילתת מדיה, אפשר לבדוק בקלות אם הדפדפן הנוכחי יש תמיכה במצב כהה על ידי בדיקה אם שאילתת המדיה prefers-color-scheme תואמת בכלל. שימו לב איך אני לא כולל אף ערך, אבל רק צריך לבדוק אם שאילתת המדיה תואמת בלבד.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

נכון למועד הכתיבה, prefers-color-scheme נתמך גם במחשב וגם בנייד (אם זמין) של Chrome ו-Edge החל מגרסה 76, ב-Firefox החל מגרסה 67, ו-Safari החל מגרסה 12.1 ב-macOS והחל מגרסה 13 ב-iOS. בכל שאר הדפדפנים, תוכלו להיעזר במאמר האם אוכל להשתמש בטבלאות תמיכה?

למידה על ההעדפות של המשתמש בזמן הבקשה

כותרת של הרמז ללקוח ב-Sec-CH-Prefers-Color-Scheme מאפשרת לאתרים לקבל את ההעדפות לגבי ערכות הצבעים של המשתמש בזמן הבקשה, באופן שמאפשר לשרתים להטביע את ה-CSS הנכון, וכתוצאה מכך למנוע הבהוב של עיצוב צבעים שגוי.

מצב כהה בתרגול

בואו נראה איך נראה בפועל את התכונה של תמיכה במצב כהה. בדיוק כמו באירוע Highlander, במצב כהה יכול להיות רק אחד: כהה או בהיר, אבל אף פעם לא שניהם. למה מציינים את זה? כי העובדה הזו אמורה להשפיע על אסטרטגיית הטעינה. אין לאלץ את המשתמשים להוריד CSS בנתיב העיבוד הקריטי במצב שהם לא משתמשים בו כרגע. כדי לשפר את מהירות הטעינה, פצלתי את שירות ה-CSS שלי לאפליקציה לדוגמה שמציג באופן מעשי את ההמלצות הבאות לשלושה חלקים כדי לדחות CSS שאינו קריטי:

  • style.css עם כללים כלליים המשמשים באתר באופן אוניברסלי.
  • dark.css שמכיל רק את הכללים שדרושים למצב כהה.
  • light.css שמכיל רק את הכללים שדרושים למצב בהיר.

אסטרטגיית טעינה

שתי האפשרויות האחרונות, light.css ו-dark.css, ייטענו באופן מותנה עם שאילתת <link media>. קודם כל, לא כל הדפדפנים יתמכו ב-prefers-color-scheme (ניתן לזיהוי באמצעות הדפוס שלמעלה), שאני מטפל בו באופן דינמי באמצעות טעינת קובץ ברירת המחדל light.css באמצעות רכיב <link rel="stylesheet"> שהוכנס באופן מותנה בסקריפט מוטבע של סימן מזעור (תאורה בהירה היא בחירה שרירותית, יכול להיות גם שהפכתי את העיצוב הכהה כחלופה לברירת המחדל). כדי למנוע הבהוב של תוכן לא מעוצב, אני מסתיר את תוכן הדף עד לטעינה light.css.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

הארכיטקטורה של גיליונות סגנונות

השתמשתי במשתני CSS לכל היותר, זה מאפשר ל-style.css הגנרי שלי להיות, ובכן, גנרי, וכל ההתאמה האישית של המצב הבהיר או הכהה מתבצעת בשני הקבצים האחרים dark.css ו-light.css. למטה ניתן לראות קטע של הסגנונות עצמם, אבל הוא אמור לשקף את הרעיון הכולל. אני מצהיר/ה על שני משתנים, -⁠-⁠color ו--⁠-⁠background-color שלמעשה יוצר עיצוב בסיסי כהה על אור ובהיר על כהה.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}
/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

לאחר מכן אני משתמש במשתנים האלה בstyle.css בכלל body { … }. כפי שהן מוגדרות :root פסאודו-מחלקה של CSS – שב-HTML מייצג את הרכיב <html> והוא זהה לבורר html, אלא שהספציפיות שלו גבוה יותר – הם יורדים, וזה משמש אותי להצהרה על משתני CSS גלובליים.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

בדוגמת הקוד שלמעלה, סביר להניח שהבחנתם במאפיין color-scheme עם הערך light dark שמופרד ברווחים.

הקוד הזה מציין לדפדפן באילו עיצובי צבעים האפליקציה שלי תומכת ומאפשרת להפעיל וריאנטים מיוחדים של גיליון הסגנון של סוכן המשתמש, שימושי, לדוגמה, לאפשר לדפדפן לעבד שדות טופס. עם רקע כהה וטקסט בהיר, שנו את סרגלי הגלילה או כדי להפעיל צבע הדגשה ספציפי לעיצוב. הפרטים המדויקים של color-scheme מצוינים ב: רמת מודול 1 של התאמת צבע לשירות CSS.

כל השאר הוא פשוט הגדרת משתני CSS לדברים החשובים באתר שלי. ארגון הסגנון הסמנטי עוזר מאוד כשעובדים במצב כהה. לדוגמה, במקום -⁠-⁠highlight-yellow, כדאי להפעיל את המשתנה -⁠-⁠accent-color, בצבע צהוב הוא לא בהכרח צהוב במצב כהה או להיפך. לפניכם דוגמה לכמה משתנים נוספים שבהם אני משתמש בדוגמה שלי.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

דוגמה מלאה

בהטמעה הבאה של Glitch: אפשר לראות את הדוגמה המלאה שמממשת את העקרונות שלמעלה. אפשר להפעיל את המצב הכהה בהגדרות של מערכת ההפעלה הספציפית ולראות איך הדף מגיב.

ההשפעה בטעינה

כשמנסים את הדוגמה הזו, אפשר לראות למה אני טוען dark.css ו-light.css באמצעות שאילתות מדיה. אפשר להפעיל את המצב הכהה ולטעון מחדש את הדף: גיליונות הסגנון הספציפיים שאינם תואמים כרגע עדיין נטענים, אבל עם העדיפות הנמוכה ביותר, כך שהם אף פעם לא יתחרו במשאבים שדרושים לאתר כרגע.

תרשים של טעינת הרשת שמראה איך במצב בהיר, שירות ה-CSS במצב כהה נטען עם העדיפות הנמוכה ביותר
אתר במצב בהיר טוען את שירות ה-CSS במצב כהה עם העדיפות הנמוכה ביותר.
תרשים של טעינת הרשת שמראה איך במצב כהה, שירות ה-CSS במצב בהיר נטען עם העדיפות הנמוכה ביותר
אתר במצב כהה טוען את שירות ה-CSS במצב בהיר עם העדיפות הנמוכה ביותר.
תרשים של טעינת הרשת שמראה איך במצב בהיר כברירת מחדל, שירות ה-CSS במצב כהה נטען עם העדיפות הנמוכה ביותר
אתר במצב בהיר כברירת מחדל בדפדפן שלא תומך ב-prefers-color-scheme טוען את שירות ה-CSS במצב כהה עם עדיפות נמוכה.

תגובה לשינויים במצב כהה

כמו כל שינוי אחר בשאילתת מדיה, אפשר להירשם לשינויים במצב כהה באמצעות JavaScript. לדוגמה, אפשר להשתמש בו כדי לשנות באופן דינמי את סמל האתר של הדף או לשנות את <meta name="theme-color"> שקובע את הצבע של סרגל כתובות ה-URL ב-Chrome. הדוגמה המלאה שלמעלה ממחישה את זה בפועל. כדי לראות את השינויים בצבע העיצוב ובסמל האתר, צריך לפתוח את בכרטיסייה נפרדת.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

החל מ-Chromium 93 ומ-Safari 15, אפשר לשנות את הצבע לפי שאילתת מדיה עם המאפיין media של רכיב צבע העיצוב meta. ההתאמה הראשונה תיבחר. לדוגמה, אפשר לבחור צבע אחד עבור מצב בהיר ועוד מצב למצב כהה. בזמן הכתיבה לא ניתן להגדיר אותם במניפסט. פרטים נוספים זמינים ב-w3c/manifest#975 GitHub בעיה.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

ניפוי באגים ובדיקה של מצב כהה

אמולציה של prefers-color-scheme בכלי הפיתוח

החלפת כל ערכת הצבעים של מערכת ההפעלה יכולה להיות מעצבנת מאוד במהירות, לכן כלי הפיתוח ל-Chrome מאפשרים עכשיו לאמולציה של ערכת הצבעים המועדפת של המשתמש בדרך שמשפיעה רק על הכרטיסייה שגלויה כרגע. פותחים את תפריט הפקודות, מתחילים להקליד Rendering, מריצים את הפקודה Show Rendering ומשנים את האפשרות הדמיה של מדיה של CSS עם העדפה לערכת צבעים.

צילום מסך של התכונה &#39;אמוטציה של תכונת המדיה של CSS&#39; עם העדפה לערכת צבעים&#39; שנמצאת בכרטיסייה &#39;עיבוד&#39; בכלי הפיתוח ל-Chrome

צילום מסך של prefers-color-scheme עם Puppeteer

Puppeteer היא ספריית Node.js שמספק ממשק API ברמה גבוהה לניהול Chrome או Chromium דרך פרוטוקול כלי הפיתוח. עם dark-mode-screenshot, אנחנו מספקים סקריפט של Puppeteer שמאפשר ליצור צילומי מסך של הדפים במצב כהה ובמצב בהיר. תוכלו להריץ את הסקריפט הזה באופן חד-פעמי, או להפוך אותו לחלק חבילת בדיקות של אינטגרציה רציפה (CI)

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

שיטות מומלצות לשימוש במצב כהה

נמנעים מלבן טהור

פרט קטן שאולי הבחנת הוא שאני לא משתמש בלבן טהור. במקום זאת, כדי למנוע זוהר ודימום על התוכן הכהה שמסביב, בחרתי בצבע לבן קצת יותר כהה. משהו כמו rgb(250, 250, 250) עובד כמו שצריך.

צבע מחדש והכהה של תמונות מצולמות

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

התמונה הראשית (Hero) הוחשכה מעט במצב כהה.
התמונה הראשית (Hero) הוחשכה מעט במצב כהה.
תמונה ראשית (Hero) רגילה במצב בהיר.
תמונה ראשית (Hero) רגילה במצב בהיר.

אפשר לשנות את הצבע באמצעות מסנן CSS בתמונות שלי. נעשה שימוש בסלקטור ב-CSS שתואם לכל התמונות שכתובת ה-URL שלהן לא מכילה את .svg, הרעיון הוא שיכול לתת לגרפיקה וקטורית (סמלים) טיפול שונה של צביעה מחדש מאשר התמונות (photos), מידע נוסף על כך בפסקה הבאה. שימו לב איך משתמשים שוב במשתנה CSS. כדי שאוכל לשנות את המסנן מאוחר יותר באופן גמיש.

צביעה מחדש נדרשת רק במצב כהה, כלומר, כאשר dark.css פעיל, אין כללים תואמים ב-light.css.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

התאמה אישית של עוצמות הצבע מחדש של מצב כהה באמצעות JavaScript

לא כולם זהים, ולאנשים יש צרכים שונים של מצב כהה. בעזרת שיטת הצביעה מחדש שמתוארת למעלה, אני יכול להפוך בקלות את עוצמת גווני אפור להעדפה של המשתמש שינוי באמצעות JavaScript, ועל ידי הגדרת הערך של 0%, אפשר גם להשבית לגמרי את הצבע מחדש. לתשומת ליבכם: document.documentElement מספק הפניה לרכיב הבסיסי (root) של המסמך, כלומר, אותו רכיב שאליו אפשר להפנות :root מחלקה של CSS.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

היפוך של גרפיקה וסמלים וקטוריים

בגרפיקה וקטורית, שבמקרה שלי משמשת כסמלים שאליהם אני מפנה באמצעות רכיבי <img>, להשתמש בשיטה אחרת לצביעה. בזמן שמחקר הוצג שאנשים לא אוהבים היפוך תמונות, הוא עובד טוב מאוד עם רוב הסמלים. שוב אני משתמש במשתני CSS כדי לקבוע את כמות ההיפוך במצב רגיל ובמצב :hover.

הסמלים הפוכים במצב כהה.
הסמלים הפוכים במצב כהה.
סמלים רגילים במצב בהיר.
סמלים רגילים במצב בהיר.

שימו לב איך אני ממיר/ה סמלים רק ב-dark.css אבל לא ב-light.css, ואיך :hover מקבל עוצמת היפוך שונה בשני המקרים כדי לגרום לסמל להופיע כהה מעט יותר או בהיר מעט יותר, בהתאם למצב שנבחר על ידי המשתמש.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

שימוש ב-currentColor בקובצי SVG מוטבעים

בתמונות SVG מוטמעות, במקום להשתמש במסנני היפוך, שאפשר למנף את currentColor מילת מפתח ל-CSS שמייצגת את הערך של מאפיין color של רכיב. כך אפשר להשתמש בערך color בנכסים שלא מקבלים אותו כברירת מחדל. נוחות, אם currentColor משמש כערך של ה-SVG מאפייני fill או stroke, במקום זאת, היא לוקחת את הערך שלו מהערך שעבר בירושה של מאפיין הצבע. יתרון מרכזי נוסף: <svg><use href="…"></svg> כדי שיהיו לכם משאבים נפרדים ו-currentColor עדיין יחולו בהקשר. לתשומת ליבך, האפשרות הזו פועלת רק עבור קובצי SVG בתוך השורה או <use href="…">, אבל לא קובצי SVG שיש אליהם הפניה כ-src של תמונה או בצורה כלשהי דרך CSS. אפשר לראות את האפשרות הזו בהדגמה שלמטה.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

מעברים חלקים בין מצבים

בזכות העובדה הזו, אפשר לעבור ממצב כהה למצב בהיר, או להיפך שגם color וגם background-color מאפייני CSS שניתנים לאנימציה. כדי ליצור את האנימציה פשוט צריך להצהיר על שני סימוני transition בשני המאפיינים. הדוגמה הבאה ממחישה את הרעיון הכולל. אפשר לחוות אותו demo.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

כיוון העיצוב עם מצב כהה

בגלל סיבות שקשורות לביצועים של הטעינה באופן כללי, מומלץ לעבוד רק עם prefers-color-scheme במאפיין media של רכיבי <link> (במקום מוטבעים בגיליונות סגנונות), יש מצבים שבהם כדאי לעבוד עם prefers-color-scheme ישירות בתוך קוד ה-HTML. כיוון האומנותי הוא מצב כזה. באינטרנט, עיצוב אומנותי עוסק במראה החזותי הכולל של דף ובאופן שבו הוא מעביר את המידע באופן חזותי, תוכן שמעודד מצבי רוח, תכונות ליצירת ניגודיות ולעורר עניין פסיכולוגי בקרב קהל היעד.

במצב כהה, המעצב אחראי להחליט מהי התמונה הטובה ביותר במצב מסוים ואם צביעה מחדש של תמונות היא לא טובה מספיק. אם משתמשים בו עם האלמנט <picture>, אז <source> של התמונה שתוצג יכול להיות תלוי במאפיין media. בדוגמה הבאה מראה את ההמיספרה המערבית במצב כהה, ואת חצי הכדור המזרחי במצב בהיר או כשלא נותנים העדפה, ובמקרים אחרים ברירת המחדל היא חצי הכדור המזרחי. זו כמובן רק לצורך המחשה. אפשר להפעיל את המצב הכהה כדי לראות את ההבדל במכשיר.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

מצב כהה, אבל הוספת אפשרות לביטול הסכמה

כמו שצוין בקטע למה דווקא מצב כהה שלמעלה, מצב כהה הוא בחירה אסתטית לרוב המשתמשים. כתוצאה מכך, ייתכן שחלק מהמשתמשים ירצו שממשק המשתמש של מערכת ההפעלה שלהם יהיה בחשיכה, אבל עדיין מעדיפים לראות את דפי האינטרנט שלהם כמו שהם רגילים לראות אותם. שיטה מצוינת היא לפעול בהתחלה לפי האות שהדפדפן שולח prefers-color-scheme, אבל כדי לאפשר למשתמשים לשנות את ההגדרה ברמת המערכת באופן אופציונלי.

הרכיב המותאם אישית <dark-mode-toggle>

אתם יכולים ליצור את הקוד בעצמכם, אבל אתם יכולים גם להשתמש ברכיב (רכיב אינטרנט) מותאם אישית מוכן מראש שיצרתי למטרה הזו. בשם <dark-mode-toggle> והיא מוסיפה מתג (מצב כהה: פועל/כבוי) או כלי להחלפת עיצוב (עיצוב: בהיר/כהה) לדף שניתן להתאים אישית באופן מלא. בהדגמה הבאה רואים את הרכיב בפעולה (אה, וגם אני 🤫 בגיש את זה בשקט בכל אחר דוגמאות למעלה).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>
מעבר למצב כהה במצב בהיר.
<dark-mode-toggle> במצב בהיר.
מעבר למצב כהה במצב בהיר.
<dark-mode-toggle> במצב כהה.

אפשר לנסות ללחוץ או להקיש על פקדי המצב הכהה בפינה השמאלית העליונה בהדגמה (דמו) שבהמשך. אם מסמנים את תיבת הסימון בפקד השלישי והרביעי, אפשר לראות איך בחירת המצבים מתבצעת יישמר גם אם תטען מחדש את הדף. כך המבקרים יוכלו להשאיר את מערכת ההפעלה שלהם במצב כהה, אלא ליהנות מהאתר במצב בהיר או להיפך.

מסקנות

כיף לעבוד עם מצב כהה ולתמוך בו פותחת דרכי עיצוב חדשות. עבור חלק מהמבקרים שלך יכול להיות ההבדל בין חוסר היכולת לטפל באתר ולהיות משתמש שמח. יש כמה מלכודות, ובהחלט יש צורך בבדיקות קפדניות, אבל מצב כהה הוא בהחלט הזדמנות מצוינת להראות שאכפת לכם מכל המשתמשים. השיטות המומלצות שהוזכרו בפוסט הזה ועוזרים כמו רכיב <dark-mode-toggle> בהתאמה אישית אתם אמורים להיות בטוחים ביכולת שלכם ליצור חוויה מדהימה של מצב כהה. נשמח לשמוע ב-Twitter מה יצרת ואם הפוסט הזה היה שימושי וגם הצעות לשיפור. תודה על שקראת מידע זה! 🌒

מקורות מידע לשאילתת המדיה prefers-color-scheme:

משאבים למטא תג color-scheme ולמאפיין ה-CSS:

קישורים כלליים למצב כהה:

מאמרים בנושא מחקר רקע לפוסט הזה:

אישורים

תכונת המדיה prefers-color-scheme, מאפיין ה-CSS color-scheme, והמטא תג הקשור הוא תהליך ההטמעה של 👏 Rune Lillesveen. רונית היא גם עורכת-שותפה של המפרט CSS Color Adjustment Module Level 1. אני רוצה 🙏 תודה ללוקאש זבילוט, רואן מרווד, צ'יראג דסאי, וגם רוב דודסון על הביקורות היסודיות שלהם על המאמר הזה. אסטרטגיית הטעינה היא המקור של ג'ייק ארצ'יבלד. אמיליו קובוס אלברז הפנה אותי לשיטת הזיהוי הנכונה מסוג prefers-color-scheme. הטיפ עם קובצי ה-SVG ו-currentColor המקושרים הגיע טימותי האצ'ר. לבסוף, אני רוצה להודות לכל המשתתפים האנונימיים במחקרי המשתמשים השונים שעזרו לעצב את ההמלצות במאמר הזה. תמונה ראשית (Hero) של נתן אנדרסון.