דף זה תורגם על ידי Cloud Translation API.

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

יתר על המידה או צורך? כל מה שצריך לדעת על מצב כהה ואיך לתמוך בו לטובת המשתמשים!

Thomas Steiner

מבוא

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

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

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

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

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

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

נעשה שימוש בסמארטפון ששוכב במיטה — סמארטפון בשימוש במיטה (מקור: UnFlood)

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

למה מצב כהה

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

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

סגור את התצוגה במערכת Mac OS 7 באמצעות — System 7CloseView (מקור)

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

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

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

צורה מיוחדת של ליקוי ראייה היא תסמונת הראייה הממוחשבת, שנקראת גם 'פריצת עיניים דיגיטלית', ומוגדרת בתור "השילוב של בעיות עיניים וראייה הקשורות לשימוש במחשבים (כולל מחשבים שולחניים, מחשבים ניידים וטאבלטים) ובמסכים אלקטרוניים אחרים (למשל סמארטפונים ומכשירי קריאה אלקטרוניים)." הוצע ששימוש במכשירים אלקטרוניים על ידי מתבגרים, בייחוד בשעות הלילה, מוביל לסיכון מוגבר למשך שינה קצר יותר, לזמן אחזור ארוך יותר בזמן השינה ולחוסר בשינה מוגברת. כמו כן, דיווחים רבים על שחשיפה לאור כחול מעורבת בוויסות של הקצב הצירקאדי ושל מחזור השינה, וסביבות אור לא סדירות עלולות להוביל למצב של מחסור בשינה, שעלול להשפיע על מצב הרוח ועל ביצועי המשימות, על פי מחקר של Rosenfield. כדי להגביל את ההשפעות השליליות האלה, הפחתת האור הכחול על ידי כוונון טמפרטורת הצבע של התצוגה באמצעות תכונות כמו Night Shift של 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-reduced-motion, שמאפשרת לזהות אם רוצים לצמצם את התנועה בדף. כתבתי על prefers-reduced-motion בעבר.

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

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

הערה: גרסה קודמת של המפרט כללה ערך שלישי, no-preference. המטרה הייתה לציין שהמשתמש לא סיפק למערכת העדפה כלשהי. מכיוון שאף דפדפן לא יישם אותו, הערך הוסר מהמפרט.

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

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

מכיוון שהדיווח על המצב הכהה מתבצע באמצעות שאילתת מדיה, אפשר לבדוק בקלות אם הדפדפן הנוכחי תומך במצב כהה, על ידי בדיקה אם שאילתת המדיה 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 הנכון וכך להימנע מהבזק של עיצוב צבעים שגוי.

מצב כהה פועל

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

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

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

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

כל השאר הוא רק הגדרה של משתני 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. הפריט הראשון שיתאים ייבחר. לדוגמה, אפשר לבחור צבע אחד למצב בהיר וצבע אחר למצב כהה. בזמן הכתיבה, לא ניתן להגדיר אותן במניפסט. ראו בעיה ב-GitHub/manifest#975.

<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 ולאחר מכן משנים את האפשרות Emulate CSS media feature מועדף-color-scheme.

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

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

Puppeteer היא ספריית Node.js שמספקת API ברמה גבוהה כדי לשלוט ב-Chrome או ב-Chromium באמצעות DevTools Protocol. באמצעות 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) הוכהכה מעט במצב כהה. — התמונה הראשית הוכהכה מעט במצב כהה.

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

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

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

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

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> והוא מוסיף מתג (מצב כהה: פועל/כבוי) או מתג שינוי עיצוב (עיצוב: בהיר/כהה) לדף, שניתן להתאים אישית באופן מלא. ההדגמה הבאה מציגה את האלמנט בפעולה (אה, וגם 🤫 אספתי אותו בשקט בכל הother דוגמאות מעלמעל<br class="ph-1-5).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></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 המוזכרים הגיע מ-Timothy Hatcher. לסיום, אני רוצה להודות למשתתפים האנונימיים הרבים שהשתתפו במחקרי המשתמשים השונים שעזרו לעצב את ההמלצות המפורטות במאמר זה. תמונה ראשית (Hathan Anderson) של נתן אנדרסון