דף זה תורגם על ידי Cloud Translation API.

צבעים תלויי סכמת צבעים ב-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, המשמעות היא שהאלמנט תומך בערכת צבעים כהה.

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

חדש: `light-dark()`

תמיכה בדפדפנים

מקור

עד עכשיו, תגובה לערך color-scheme שנעשה בו שימוש הייתה שמורה לצבעים של המערכת. עכשיו יש לכם גם את היכולת הזו, בזכות light-dark() שמפורט במודול הצבעים של CSS ברמה 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;
  }
}

דף שתומך במצב בהיר או כהה באמצעות prefers-color-scheme.
ערכי הצבעים משתנים ב-CSS באמצעות שאילתה למדיה.

בזכות 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);
}

דף שתומך במצב בהיר או כהה באמצעות prefers-color-scheme.
ערכי הצבעים משתנים באמצעות light-dark().

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

דף שתגובה למצב בהיר או כהה באמצעות prefers-color-scheme.
ערכי הצבעים משתנים באמצעות light-dark().
באחת מהאפשרויות אפשר לאלץ מצב בהיר או כהה. כדי לעשות זאת, משנים את הערך של color-scheme.

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

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

חדש: light-dark()

יישום מעשי

חדש: `light-dark()`