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

לדוגמה, צבע המערכת 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().

בדוגמה הבאה, הערך של background-color הוא #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.