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