צבעים תלויי סכמת צבעים ב-CSS באמצעות light-dark()

לצבעים של המערכת יש יכולת להגיב לערך הנוכחי של color-scheme. הפונקציה light-dark() חושפת את אותה יכולת למחברים.

Bramus

צבעי המערכת ב-CSS

ב-CSS אפשר להשתמש בהרבה צבעים מאחד ממרחבי הצבעים הרבים. לדוגמה, אפשר להשתמש בצבעים עם שם, בצבעים קודקס, בפונקציות צבע שמקושרות למרחב צבעים ספציפי, בפונקציה הגנרית יותר color().

לדוגמה, את הצבע בעל השם cornflowerblue אפשר לייצג גם כ-#6495ED, או כ-hsl(218.54deg 79.19% 66.08%), או color(display-p3 0.43 0.58 0.9).

בנוסף לשמות ולפורמטים השונים האלה, שירות CSS כולל צבעים שמתוארים כצבעי המערכת ומצוינים ברמה 4 של מודול הצבע של CSS. צבעים אלה מוגדרים על ידי הדפדפן ומיוצגים על ידי מילת מפתח.

לדוגמה, צבע המערכת Canvas - שלא להתבלבל עם הרכיב <canvas> - מייצג את "הרקע של תוכן האפליקציה או המסמכים". הוא משתלב היטב עם CanvasText, שמייצג את 'טקסט בתוכן או במסמכים של אפליקציה', וגם מיועד לשימוש בשילוב איתו.

ב-CSS, משתמשים בהם באופן הבא:

body {
  color: CanvasText;
  background-color: Canvas;
}

כברירת מחדל, CanvasText מניב צבע קרוב ל-black ו-Canvas הוא צבע קרוב ל-white. ההטמעה בפועל תלויה בדפדפן. לדוגמה, הערך CanvasText ב-Chrome יתקבל כ-#121212, ואילו ב-Safari הוא יתקבל כ-#1e1e1e, כהה מעט יותר.

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

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

בהדגמה הבאה אפשר לשנות את הערך של color-scheme שמוגדר ל-:root ולראות איך הדף מגיב.

• אם הערך שמוגדר הוא light dark, הרכיב תומך גם במצב בהיר וגם במצב כהה. הבחירה של הערך שבו נעשה שימוש תלויה בערך של prefers-color-scheme media condition.
• כשהערך מוגדר ל-light, המשמעות היא שהאלמנט תומך בערכת צבעים בהירה.
• כשהערך מוגדר ל-dark, המשמעות היא שהאלמנט תומך בערכת צבעים כהה.

חדש: light-dark()

עד עכשיו, התגובה לערך color-scheme שהיה בשימוש הייתה שמורה לצבעי המערכת. בזכות light-dark(), שצוין ב-CSS Color Module Level 5, עכשיו יש לכם גם את אותה יכולת.

light-dark() היא פונקציה שמקבלת שני ארגומנטים, ושניהם חייבים להיות <color>. אחד משני הצבעים נבחר בהתאם לערכת הצבעים.

• אם ערכת הצבעים שבה נעשה שימוש היא light או לא ידועה, הערך המחושב של הערך הראשון מוחזר.
• אם ערכת הצבעים שבה נעשה שימוש היא dark, המערכת מחזירה את הערך המחושב של הצבע השני.

התוצאה של light-dark() היא <color>. אפשר להשתמש בו ב-CSS בכל מקום שבו מכבדים <color>. לדוגמה, בנכסים color ו-background-color, אבל גם בפונקציה כמו linear-gradient().

בדוגמה הבאה, צבע הרקע שבו נעשה שימוש הוא #333 במצב כהה או #ccc במצב בהיר (או במצב לא ידוע).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

הערה: כדי ש-light-dark() יפעל כראוי, צריך לציין color-scheme. מכיוון שהנכס הזה עובר בירושה, בדרך כלל מגדירים אותו ב-:root, אבל אם רוצים אפשר להגדיר אותו באלמנט ספציפי.

יישום מעשי

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

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

בזכות light-dark(), אפשר לפשט את הקוד הזה. מכיוון ש-color-scheme מוגדר כ-light dark ב-:root, הערכים של הצבעים האלה משתנים באופן אוטומטי כשמשנים את מערכת ההפעלה ממצב בהיר למצב כהה ולהפך.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

כבונוס נוסף, אפשר לאלץ תת-עץ מסוים של ה-DOM להשתמש רק במצב בהיר או כהה על ידי הגדרה של color-scheme לערך dark או לערך light. בדוגמה הבאה, ההגדרה הזו חלה על :root.