איך לפשט מצב כהה ב-CSS עם פונקציית light-dark ב-2026

לפני שנה ישבתי על שחזור עיצוב לאתר של סטודיו באלנבי. הקובץ הכיל כמעט 400 שורות של Media Queries ייעודיות עבור prefers-color-scheme. כל כפתור, כל כרטיסייה וכל טקסט הופיעו פעמיים. זה היה סיוט לתחזוקה.

פונקציית light-dark() משנה את התמונה לחלוטין. היא מאפשרת להגדיר שני צבעים באותה הצהרה בדיוק. הנה 5 צעדים ליישום נקי באתר שלכם.

1. הגדירו color-scheme בחלק העליון של הקוד

הצעד הראשון והקריטי ביותר הוא להגדיר לדפדפן שהאתר תומך בשני המצבים. בלי ההגדרה הזו, הדפדפן פשוט יתעלם מהפונקציה.

הגדרה · color-scheme

תכונת CSS שמודיעה לדפדפן באילו ערכות נושא (בהיר או כהה) הדף תומך, ומאפשרת לפונקציות כמו light-dark() לפעול באופן אוטומטי.

מגדירים את התכונה באלמנט ה-root:

:root {
  color-scheme: light dark;
}

ברגע שהשורה הזו קיימת, הדפדפן יודע לזהות את העדפת המשתמש במערכת ההפעלה ולהחליט איזה ערך למשוך.

2. החליפו Media Queries כפולות בשורת קוד אחת

בעבר, כדי לשנות צבע רקע, הייתם צריכים לכתוב את הרקע הבהיר, ואז לפתוח בלוק מיוחד עבור מצב כהה. כעת כל המבנה המסורבל הזה נעלם.

במקום לכתוב שני בלוקים נפרדים, כותבים שורה בודדת:

.card {
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#111111, #eeeeee);
}

הערך הראשון מיועד למצב בהיר, והערך השני למצב כהה. קוד קצר, קריא וקל לתחזוקה.

3. שלבו משתני CSS ליצירת מערכת מודולרית

הכוח האמיתי של הפונקציה מתגלה כשמשלבים אותה עם משתני CSS. במקום להשתמש ב-light-dark() בכל אלמנט בנפרד, מגדירים את המשתנים המרכזיים בראשי הקובץ.

:root {
  color-scheme: light dark;
  --bg-main: light-dark(#ffffff, #0a0a0a);
  --text-main: light-dark(#1a1a1a, #f5f5f5);
  --brand-color: light-dark(#0055ff, #99bbff);
}

מכאן ואילך, משתמשים ב-var(--bg-main) לאורך כל הפרויקט. הקוד נשאר נקי. שינוי אחד בראש הקובץ מעדכן את כל האתר.

4. שליטה ידנית בעזרת התגית data-theme

מה קורה כשהגולש רוצה לבחור בעצמו את המצב באמצעות מתג באתר, ללא קשר להגדרות המחשב שלו? הפונקציה תומכת גם בזה.

כל מה שצריך לעשות הוא לשנות את תכונת ה-color-scheme על אלמנט מסוים או על תגית ה-html באמצעות Script קצר:

<html style="color-scheme: dark;">

מנוע ה-CSS יבין מיד שעליו להציג את הערך השני בתוך light-dark(), ללא צורך במחלקות מיוחדות לכל רכיב.

5. טיפול בתמונות ובאלמנטים ויזואליים

צבעים אינם האלמנט היחיד שמשתנה במצב כהה. תמונות ואיורים בהירים מדי עלולים לסנוור את המשתמש כשהרקע כהה.

ניתן לשלב את הגישה הזו עם ערכי אטימות (opacity) או פילטרים:

img.hero {
  opacity: light-dark(1, 0.85);
}

זה שומר על מראה מאוזן ונעים לעין, בלי צורך להחליף את קובצי התמונה עצמם.

סיכום

פונקציית light-dark() היא שינוי תפיסתי בכתיבת CSS. היא חוסכת קוד, מונעת שגיאות ושומרת על הקובץ מסודר.

💡

כתיבת CSS נקי פירושה פחות Media Queries ויותר פונקציות נייטיב של השפה. התחילו להשתמש ב-light-dark() בפרויקט הבא שלכם.