‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

צבעים תלויי סכמת צבעים ב-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 Color Module Level 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()`

Browser Support

Source

עד עכשיו, רק צבעי המערכת הגיבו לערך 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;
  }
}

דף שמגיב למצב בהיר או מצב כהה באמצעות 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()

יישום מעשי

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

נעים להכיר: `light-dark()`