עמוסים מדי או לצורך? כאן אפשר לקרוא את כל המידע על מצב כהה ואיך לתמוך בו לטובת המשתמשים.
מבוא
מצב כהה לפני מצב כהה
שיפרנו את המצב הכהה. בתחילת המחשוב האישי, המצב הכהה לא היה עניין של בחירה, אלא עובדה: צגי CRT מונוכרומטיים שמופעלים על ידי ירי של קורות אלקטרוניות על מסך זרחני, והזרחן ששימש בשלבי ה-CRT המוקדמים היה ירוק. מאחר שהטקסט הוצג בירוק ושאר המסך היה שחור, המודלים האלה נקראות לעיתים קרובות מסכים ירוקים.
בהמשך, ב-צבעי ה-CRT שנוספו, הוצגו מספר צבעים באמצעות השימוש בזרחנים אדומים, ירוקים וכחולים. הם יצרו לבן על ידי הפעלת כל שלושת הזרחנים בו-זמנית. עם התפתחותו של WYSIWYG מתוחכם יותר פרסום במחשב, הרעיון להפוך את המסמך הווירטואלי לדומה לגיליון נייר פיזי הפך לפופולרי.
כאן התחילה טרנד בעיצוב כהה על לבן, והמגמה הזו הועברה אינטרנט מבוסס-מסמכים. הדפדפן הראשון אי פעם, WorldWideWeb (חשוב לזכור, שירות CSS עדיין לא הומצא). הציגו דפי אינטרנט באופן הזה. עובדה משעשעת: הדפדפן השני בעולם, הדפדפן במצב קו – דפדפן מבוסס טרמינל – היה ירוק על רקע כהה. כיום, דפי אינטרנט ואפליקציות אינטרנט מעוצבים בדרך כלל באמצעות טקסט כהה על רקע בהיר, ההנחה הבסיסית שהיא גם מקודדת באופן קשיח בגיליונות של סגנונות של סוכני משתמש, כולל של Chrome.
ימי ה-CRT חלפו. הצריכה והיצירה של תוכן עברו למכשירים ניידים שמשתמשים ב-LCD עם תאורה אחורית. או במסכים של AMOLED חסכוניים באנרגיה. מחשבים, טאבלטים וסמארטפונים קטנים יותר וניידים יותר הובילו לדפוסי שימוש חדשים. משימות לשעות הפנאי, כמו גלישה באינטרנט, תכנות בשביל הכיף ומשחקים מתקדמים נפוצים אחרי שעות הפעילות בסביבות חשוכות. אנשים אפילו נהנים מהמכשירים שלהם במיטות שלהם בשעות הלילה. ככל שיותר אנשים משתמשים במכשירים שלהם בחושך, כך הרעיון של חזרה לשורשים של בהיר בחושך הופך לפופולרי יותר.
למה כדאי להשתמש במצב כהה
מצב כהה מסיבות אסתטיות
כשאנשים שואלים שאלות למה הם אוהבים או רוצים מצב כהה, התגובה הכי פופולרית היא ש"זה קל יותר לעיניים". ולאחר מכן "it's אלגנטיים ו-יפים". אפל מסמכי התיעוד למפתחים בנושא מצב כהה כותבת במפורש: "בחירה אם לאפשר מראה בהיר או כהה הוא אסתטיקה עבור רוב המשתמשים, ויכול להיות שלא קשור לתנאי התאורה בסביבה".
מצב כהה ככלי נגישות
יש גם אנשים שלמעשה צריכים מצב כהה ומשתמשים בו ככלי נגישות נוסף, לדוגמה, משתמשים עם ליקויי ראייה. המופע המוקדם ביותר של כלי נגישות כזה שמצאתי הוא התכונה CloseView ב-System 7, עם מתג עבור שחור על לבן ולבן על שחור. למרות שהצבע של מערכת 7 נתמך, ממשק המשתמש שהוגדר כברירת מחדל עדיין היה בשחור-לבן.
ההטמעות האלה, שמבוססות על היפוך, הראו את נקודות החולשה שלהן אחרי שהתחילו להשתמש בצבע. מחקר על התנהגות משתמשים מאת Szpiro et al. on איך אנשים עם ליקויי ראייה יכולים לגשת למכשירים מחשוב הראו שכל המשתמשים שרואיינו לא אהבו תמונות הפוכות, אבל העדיפו טקסט בהיר על רקע כהה. Apple מתאימה להעדפת המשתמש הזו באמצעות תכונה בשם Smart Invert, שהופך את הצבעים במסך, למעט תמונות, מדיה, ואפליקציות מסוימות שמשתמשות בסגנונות צבעים כהים.
צורה מיוחדת של ליקויי ראייה היא 'תסמונת הראייה הממוחשבת', שנקראת גם 'מאמץ עיניים דיגיטלי', מוגדר בתור "השילוב של בעיות עיניים וראייה שקשורות לשימוש במחשבים (כולל מחשבים, מחשבים ניידים וטאבלטים) ובמסכים אלקטרוניים אחרים (למשל, סמארטפונים ומכשירי קריאה אלקטרוניים)." הוצעו כי השימוש של מתבגרים במכשירים אלקטרוניים, במיוחד בשעות הלילה, מוביל לסיכון מוגבר למשך זמן שינה קצר יותר, זמן אחזור ארוך יותר בזמן השינה ועלייה בחוסר השינה. בנוסף, החשיפה לאור כחול נצפתה מדווח להיות מעורבים ברגולציה של הקצב היומיומי ואת מחזור השינה, וסביבות אור לא סדירות עלולות להוביל מחסור בשינה, שעלולות להשפיע על מצב הרוח ועל ביצועי המשימות, במחקר שנערך על ידי רוזנפילד. כדי להגביל את ההשפעות השליליות האלה, עליך לכוונן את טמפרטורת הצבעים של המסך כדי לצמצם את האור הכחול באמצעות תכונות כמו iOS משמרת לילה או Android תאורת לילה יכולה לעזור, וגם הימנעות מאורות בהירים או מאורות לא סדירים באופן כללי באמצעות עיצובים כהים או מצבים כהים.
חיסכון בסוללה במצב כהה במסכי AMOLED
לסיום, ידוע שמצב כהה חוסך הרבה אנרגיה מסכי AMOLED. מקרים לדוגמה ב-Android שמתמקדים באפליקציות פופולריות של Google כמו YouTube הראו שהחיסכון בסוללה יכול להגיע עד 60%. בסרטון שלמטה יש פרטים נוספים על המקרים לדוגמה האלה ועל החיסכון בחשמל לכל אפליקציה.
הפעלת מצב כהה במערכת ההפעלה
אחרי שהסברתי למה המצב הכהה הוא דבר חשוב מאוד למשתמשים רבים, בואו נראה איך תוכלו לתמוך בו.
מערכות הפעלה שתומכות במצב כהה או בעיצוב כהה בדרך כלל יש אפשרות להפעיל אותו במקום כלשהו בהגדרות. ב-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 באמצעות שאילתות מדיה.
אפשר להפעיל את המצב הכהה ולטעון מחדש את הדף:
גיליונות הסגנון הספציפיים שאינם תואמים כרגע עדיין נטענים, אבל עם העדיפות הנמוכה ביותר,
כך שהם אף פעם לא יתחרו במשאבים שדרושים לאתר כרגע.
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 עם העדפה לערכת צבעים.
צילום מסך של 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) נראית שונה מעט. המחקר שלי על התנהגות משתמשים הראו שרוב האנשים שהשתתפו בסקר כשהמצב הכהה מופעל, עדיף להעלות תמונות מעט פחות צבעוניות ומבריקות. אני מתייחס לכך כצביעה מחדש.
אפשר לשנות את הצבע באמצעות מסנן 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:
- נכס CSS והמטא תג
color-scheme - דף הסטטוס של פלטפורמת Chrome
- באג ב-Chromium
- מפרט רמה 1 של התאמת צבעים ב-CSS
- בעיית GitHub ב-CSS עבור המטא תג ונכס ה-CSS
- בעיית GitHub ב-HTML WhatWG עבור המטא תג
קישורים כלליים למצב כהה:
- עיצוב חומר – עיצוב כהה
- מצב כהה ב'סוקר האינטרנט'
- תמיכה במצב כהה ב-WebKit
- הנחיות לממשק האנושי של Apple – מצב כהה
מאמרים בנושא מחקר רקע לפוסט הזה:
אישורים
תכונת המדיה prefers-color-scheme, מאפיין ה-CSS color-scheme,
והמטא תג הקשור הוא תהליך ההטמעה של 👏 Rune Lillesveen.
רונית היא גם עורכת-שותפה של המפרט CSS Color Adjustment Module Level 1.
אני רוצה 🙏 תודה ללוקאש זבילוט,
רואן מרווד,
צ'יראג דסאי,
וגם רוב דודסון
על הביקורות היסודיות שלהם על המאמר הזה.
אסטרטגיית הטעינה היא המקור של ג'ייק ארצ'יבלד.
אמיליו קובוס אלברז הפנה אותי לשיטת הזיהוי הנכונה מסוג prefers-color-scheme.
הטיפ עם קובצי ה-SVG ו-currentColor המקושרים הגיע
טימותי האצ'ר.
לבסוף, אני רוצה להודות לכל המשתתפים האנונימיים במחקרי המשתמשים השונים
שעזרו לעצב את ההמלצות במאמר הזה.
תמונה ראשית (Hero) של נתן אנדרסון.