האם מדובר בבאז מוגזם או במוצר חובה? כאן תוכלו לקרוא על מצב כהה ואיך לתמוך בו כדי להועיל למשתמשים שלכם.
מבוא
מצב כהה לפני מצב כהה
השלמנו את המעגל עם המצב הכהה. בתחילת עידן המחשוב האישי, מצב כהה לא היה עניין של בחירה, אלא עובדה: מסכי מחשב CRT מונוכרומטיים פעלו על ידי ירי של קרני אלקטרונים על מסך פוספורסנטי, והפוספור ששימש במסכי CRT מוקדמים היה ירוק. הטקסט הוצג בירוק, ושאר המסך היה שחור, ולכן המודלים האלה נקראו לעיתים קרובות מסכים ירוקים.
מסכי ה-CRT הצבעוניים שהוצגו לאחר מכן הציגו כמה צבעים באמצעות חומרים זרחניים אדומים, ירוקים וכחולים. הם יצרו לבן על ידי הפעלה של כל שלושת חומרי הזרחן בו-זמנית. עם התפתחות של WYSIWYG מתוחכם יותר לפרסום שולחני, הרעיון של יצירת מסמך וירטואלי שדומה לדף נייר פיזי הפך לפופולרי.
כאן התחילה מגמת העיצוב של טקסט כהה על רקע לבן, והמגמה הזו עברה אל האינטרנט המוקדם שמבוסס על מסמכים. הדפדפן הראשון אי פעם, WorldWideWeb (חשוב לזכור שCSS עוד לא הומצא), הציג דפי אינטרנט בצורה הזו. עובדה מעניינת: הדפדפן השני אי פעם, Line Mode Browser – דפדפן מבוסס-טרמינל – היה ירוק על רקע כהה. בימינו, דפי אינטרנט ואפליקציות אינטרנט בדרך כלל מעוצבים עם טקסט כהה על רקע בהיר. זו הנחת יסוד שמוטמעת גם בגיליונות סגנון של סוכני משתמש, כולל Chrome.
הימים של מסכי ה-CRT חלפו מזמן. הצריכה והיצירה של תוכן עברו למכשירים ניידים שמשתמשים במסכי LCD עם תאורה אחורית או במסכי AMOLED חסכוניים באנרגיה. מחשבים, טאבלטים וסמארטפונים קטנים וניידים יותר הובילו לדפוסי שימוש חדשים. משימות שקשורות לפנאי, כמו גלישה באינטרנט, כתיבת קוד בשביל הכיף ומשחקים מתקדמים, מתבצעות בדרך כלל אחרי שעות העבודה בסביבות חשוכות. אנשים אפילו נהנים מהמכשירים שלהם במיטה בלילה. ככל שיותר אנשים משתמשים במכשירים שלהם בחושך, כך הרעיון של חזרה למקורות של בהיר על כהה הופך לפופולרי יותר.
למה כדאי להשתמש במצב כהה
מצב כהה מסיבות אסתטיות
כששואלים אנשים למה הם אוהבים את המצב הכהה או רוצים להשתמש בו, התשובה הכי פופולרית היא "קל יותר להסתכל על המסך", ואחריה "זה אלגנטי ויפה". Apple כותבת במפורש במסמכי התיעוד למפתחים בנושא מצב כהה: "הבחירה אם להפעיל מראה בהיר או כהה היא אסתטית עבור רוב המשתמשים, ויכול להיות שהיא לא קשורה לתנאי התאורה הסביבתית".
המצב הכהה ככלי נגישות
יש גם אנשים שצריכים את המצב הכהה ומשתמשים בו ככלי נגישות נוסף, למשל משתמשים עם ראייה לקויה. הכלי הכי מוקדם לנגישות שמצאתי הוא התכונה CloseView של System 7, שהיה לה מתג לשחור על לבן וללבן על שחור. למרות שמערכת 7 תמכה בצבע, ממשק המשתמש שהוגדר כברירת מחדל היה עדיין בשחור-לבן.
החולשות של ההטמעות האלה, שמבוססות על היפוך, נחשפו ברגע שהוצג צבע. מחקר משתמשים של Szpiro et al. בנושא איך אנשים עם לקויות ראייה ניגשים למכשירי מחשוב הראה שכל המשתמשים שנשאלו לא אהבו תמונות הפוכות, אבל רבים העדיפו טקסט בהיר על רקע כהה. אפל מספקת מענה להעדפה הזו של המשתמשים באמצעות תכונה שנקראת היפוך חכם, שמבצעת היפוך של הצבעים בתצוגה, למעט תמונות, מדיה ואפליקציות מסוימות שמשתמשות בסגנונות צבע כהים.
צורה מיוחדת של לקות ראייה היא תסמונת ראייה ממוחשבת, שנקראת גם מאמץ עיניים דיגיטלי. ההגדרה שלה היא "השילוב של בעיות בעיניים ובראייה שקשורות לשימוש במחשבים (כולל מחשבים שולחניים, מחשבים ניידים וטאבלטים) ובמסכים אלקטרוניים אחרים (למשל סמארטפונים ומכשירי קריאה אלקטרוניים)". הועלתה הצעה שלפיה השימוש במכשירים אלקטרוניים על ידי בני נוער, במיוחד בשעות הלילה, מוביל לסיכון מוגבר לשינה קצרה יותר, לזמן רדומות ארוך יותר ולמחסור שינה מוגבר. בנוסף, ממחקרים עולה שאור כחול משפיע על השעון הביולוגי ומחזור השינה. סביבות עם אור לא סדיר עלולות לגרום למחסור בשינה, ועשויות להשפיע על מצב הרוח ועל הביצועים במשימות, על פי מחקר של רוזנפילד. כדי לצמצם את ההשפעות השליליות האלה, אפשר להפחית את האור הכחול על ידי שינוי טמפרטורת הצבע של התצוגה באמצעות תכונות כמו Night Shift ב-iOS או Night Light ב-Android. אפשר גם להימנע מאור חזק או מאור לא סדיר באופן כללי באמצעות ערכות נושא כהות או מצבים כהים.
חיסכון בצריכת הסוללה במצב כהה במסכי AMOLED
בנוסף, ידוע שמצב כהה חוסך הרבה אנרגיה במסכי AMOLED. מחקרי מקרה ב-Android שהתמקדו באפליקציות פופולריות של Google, כמו YouTube, הראו שחיסכון בצריכת החשמל יכול להגיע ל-60%. בסרטון שבהמשך מפורטים מקרים לדוגמה ומוסבר כמה אנרגיה נחסכת בכל אפליקציה.
הפעלת המצב הכהה במערכת ההפעלה
אחרי שסיפקתי רקע על הסיבה לכך שמצב כהה חשוב כל כך להרבה משתמשים, בואו נראה איך אפשר לתמוך בו.
בדרך כלל יש אפשרות להפעיל מצב כהה או עיצוב כהה במערכות הפעלה שתומכות בהם, איפשהו בהגדרות. ב-macOS X, האפשרות נמצאת בקטע כללי בהעדפות המערכת ונקראת מראה (צילום מסך), וב-Windows 10, היא נמצאת בקטע צבעים ונקראת בחירת צבע (צילום מסך). ב-Android Q, אפשר למצוא את ההגדרה הזו בקטע תצוגה כמתג להפעלה או להשבתה של עיצוב כהה (צילום מסך). ב-iOS 13, אפשר לשנות את המראה בקטע תצוגה ובהירות בהגדרות (צילום מסך).
שאילתת המדיה prefers-color-scheme
לפני שאמשיך, אציג עוד קצת תיאוריה.
שאילתות מדיה
מאפשרות למחברים לבדוק ערכים או תכונות של סוכן המשתמש או של מכשיר התצוגה ולשאול עליהם שאלות,
בלי קשר למסמך שמוצג.
הם משמשים בכלל CSS @media כדי להחיל סגנונות על מסמך באופן מותנה, ובהקשרים ובשפות שונות אחרות, כמו HTML ו-JavaScript.
Media Queries Level 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. הוא נתמך גם במחשבים ובניידים (במקרים שבהם הוא זמין).
לגבי כל שאר הדפדפנים, אפשר לעיין במסמך טבלאות התמיכה של Can I use.
הכרת ההעדפות של המשתמש בזמן הבקשה
כותרת רמז הלקוח 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 מפורטים במודול להתאמת צבעים ב-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 באמצעות שאילתות מדיה.
אפשר לנסות להפעיל את המצב הכהה ולטעון מחדש את הדף:
גיליונות הסגנון הספציפיים שלא תואמים כרגע עדיין נטענים, אבל עם העדיפות הכי נמוכה,
כך שהם אף פעם לא מתחרים עם משאבים שהאתר צריך כרגע.
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. הראשון שתואם ייבחר. לדוגמה, אתם יכולים להגדיר צבע אחד למצב בהיר וצבע אחר למצב כהה. בזמן כתיבת המאמר הזה, אי אפשר להגדיר את ההרשאות האלה במניפסט. מידע נוסף מופיע בבעיה מספר 975 ב-GitHub בנושא w3c/manifest.
<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 עם העדפה לערכת צבעים.
צילום מסך prefers-color-scheme באמצעות Puppeteer
Puppeteer היא ספריית Node.js
שמספקת API ברמה גבוהה לשליטה ב-Chrome או ב-Chromium באמצעות פרוטוקול כלי הפיתוח.
עם dark-mode-screenshot, אנחנו מספקים סקריפט Puppeteer שמאפשר ליצור צילומי מסך של הדפים שלכם במצב כהה ובמצב בהיר.
אפשר להריץ את הסקריפט הזה כפעולה חד-פעמית, או לחלופין להפוך אותו לחלק מחבילת הבדיקות של Continuous Integration (שילוב רציף, CI).
npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
שיטות מומלצות לשימוש במצב כהה
הימנעות מלבן טהור
פרט קטן שאולי שמתם לב אליו הוא שאני לא משתמש בלבן טהור.
במקום זאת, כדי למנוע הילה וטשטוש על רקע התוכן הכהה שמסביב,
אני בוחרת בלבן קצת יותר כהה. למשל, rgb(250, 250, 250).
הוספת צבעים מחדש והכהיית תמונות
אם משווים בין שני צילומי המסך שלמטה, אפשר לראות שלא רק העיצוב הראשי השתנה מכהה על בהיר לבהיר על כהה, אלא גם תמונת הנושא נראית קצת שונה. מחקר המשתמשים שלי הראה שרוב האנשים שהשתתפו בסקר מעדיפים תמונות עם צבעים פחות עזים ובוהקים כשהמצב הכהה מופעל. אני קורא לזה צביעה מחדש.
אפשר לשנות את הצבעים באמצעות מסנן CSS בתמונות שלי.
אני משתמש בסלקטור ב-CSS שתואם לכל התמונות שלא מכילות את המחרוזת .svg בכתובת ה-URL שלהן. הרעיון הוא שאוכל להחיל על גרפיקה וקטורית (סמלים) טיפול שונה של צביעה מחדש מאשר על התמונות שלי (תמונות), אפשר לקרוא על כך עוד בפסקה הבאה.
שימו לב שוב לשימוש במשתנה 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 מוטבעים או <use href="…">, אבל לא לגבי קובצי SVG שמפנים אליהם כאל src של תמונה או בדרך אחרת באמצעות CSS.
אפשר לראות את זה בהדגמה שלמטה.
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
מעבר חלק בין מצבים
המעבר ממצב כהה למצב בהיר או להיפך יכול להיות חלק יותר כי גם color וגם background-color הם מאפייני CSS שאפשר להנפיש.
כדי ליצור את האנימציה, פשוט מגדירים שני transitions לשני הנכסים.
בדוגמה שלמטה אפשר לראות את הרעיון הכללי, ואפשר לנסות אותו בהדגמה.
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.
דוגמה למצב כזה היא בימוי אמנותי.
באינטרנט, עיצוב אמנותי עוסק במראה החזותי הכולל של דף ובאופן שבו הוא מעביר מסר חזותי,
מעורר מצבי רוח, יוצר ניגוד בין תכונות ופונה באופן פסיכולוגי לקהל היעד.
במצב כהה, המעצב צריך להחליט איזו תמונה הכי מתאימה למצב מסוים, ואם צביעה מחדש של תמונות היא לא מספיק טובה.
אם משתמשים במאפיין <source> עם הרכיב <picture>, אפשר להגדיר שהתמונה שתוצג תהיה תלויה במאפיין 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> המותאם אישית יעזרו לכם ליצור חוויה מדהימה במצב כהה.
אפשר לכתוב לי בטוויטר מה יצרתם, אם הפוסט הזה היה שימושי או אם יש לכם הצעות לשיפור.
תודה על שקראת מידע זה! 🌒
קישורים רלוונטיים
משאבים לשאילתת המדיה prefers-color-scheme:
משאבים בנושא תג המטא color-scheme ומאפיין ה-CSS:
- מאפיין ה-CSS
color-schemeותג המטא - דף סטטוס הפלטפורמה של Chrome
- באג ב-Chromium
- מפרט של מודול לשינוי צבעים ב-CSS, רמה 1
- בעיה ב-GitHub של קבוצת העבודה של CSS בנוגע לתג המטא ולמאפיין ה-CSS
- בעיה ב-GitHub בנושא HTML WHATWG לגבי מטא תג
קישורים כלליים למצב כהה:
- Material Design – עיצוב כהה
- מצב כהה בכלי לבדיקת אתרים
- תמיכה במצב כהה ב-WebKit
- הנחיות של Apple לממשק משתמש – מצב כהה
מאמרים למחקר רקע לפוסט הזה:
תודות
התכונה prefers-color-scheme של מדיה, המאפיין color-scheme של CSS ותג ה-meta שקשור אליהם הם פרי עבודתו של 👏 Rune Lillesveen.
רונה הוא גם אחד מהעורכים של המפרט CSS Color Adjustment Module Level 1.
אני רוצה להודות 🙏 ללוקאש זבילוט, לרואן מרווד, לצ'יראג דסאי ולרוב דודסון על הביקורות המקיפות שלהם על המאמר הזה.
אסטרטגיית הטעינה היא פרי מוחו של Jake Archibald.
Emilio Cobos Álvarez הציע לי את שיטת הזיהוי הנכונה של prefers-color-scheme.
הטיפ עם קובצי ה-SVG שמופיעים בהפניה ועם currentColor הגיע מ-Timothy Hatcher.
לבסוף, אני רוצה להודות למשתתפים האנונימיים הרבים במחקרים השונים על התנהגות המשתמשים, שעזרו לי לגבש את ההמלצות במאמר הזה.