צבעים תלויי סכמת צבעים ב-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 תנאי המדיה.
• אם המדיניות מוגדרת לערך light, זה אומר שהרכיב תומך בערכת צבעים בהירה.
• אם המדיניות מוגדרת לערך dark, זה אומר שהרכיב תומך בערכת צבעים כהים.

חדש: light-dark()

עד עכשיו, התגובה לערך color-scheme שהייתה בשימוש הייתה שמורה לצבעי המערכת. בזכות light-dark(), שצוין במודול צבע 5 של CSS ברמה 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.