بُني الوضع الداكن في Waypoint بالطريقة الكلاسيكية: مجموعة كاملة من tokens الألوان في :root، ومجموعة كاملة ثانية داخل @media (prefers-color-scheme: dark). ونجح ذلك إلى أن حدثت ثلاثة أشياء. أضاف أحدهم token إلى المجموعة الفاتحة ونسي الداكنة. وطلب المستخدمون مفتاح تبديل، لأن نظام التشغيل لديهم داكن لكنهم يريدون الجدول فاتحًا على جهاز العرض. وأراد فريق التصميم أن يكون الـ hero داكنًا في كلا الوضعين.
كلٌّ من هذه سطر واحد مع color-scheme وlight-dark().
:root {\n color-scheme: light dark;\n}هذا التصريح يقول: «هذه الصفحة تدعم النظامين اللونيين؛ استخدم تفضيل المستخدم». ويستجيب المتصفّح برسم واجهته الخاصة لتطابق ذلك: عناصر النماذج ومربّعات الاختيار وأشرطة التمرير وخلفية الصفحة الافتراضية ولون النص. ودونه تحصل الصفحة الداكنة رغم ذلك على قوائم <select> وأشرطة تمرير بيضاء ساطعة، وهذه أشهر علامة تفضح وضعًا داكنًا مصنوعًا يدويًا.
أضف وسم الـ meta المقابل ليعرف المتصفّح قبل أن تصل الـ CSS، فلا تومض الصفحة بالأبيض عند التحميل:
\n<meta name=\"color-scheme\" content=\"light dark\">تأخذ light-dark() لونين وتُرجع الأول حين يكون النظام اللوني المستخدم في العنصر فاتحًا، والثاني حين يكون داكنًا:
:root {\n color-scheme: light dark;\n\n --surface: light-dark(#ffffff, #0f172a);\n --text: light-dark(#1f2937, #e5e7eb);\n --card: light-dark(#f8fafc, #1e293b);\n --border: light-dark(oklch(90% 0.01 280), oklch(35% 0.02 280));\n}\n\nbody {\n background: var(--surface);\n color: var(--text);\n}\n.session-card {\n background: var(--card);\n border: 1px solid var(--border);\n}كل token يُعرَّف الآن مرة واحدة، والقيمتان جنبًا إلى جنب. وإضافة token دون قيمته الداكنة تصبح ناقصة بشكل واضح عند المراجعة. light-dark() للألوان ضمن Baseline 2024 وتعمل في كل المتصفّحات الحالية. أما تمرير صورتين إليها (مثل التدرّجات أو url()) فلم يدخل Baseline إلا في سبتمبر 2026، وهي لا تقبل الأطوال ولا غيرها من القيم أبدًا، لذا أبقِ لهذه الحالات media query prefers-color-scheme في الوقت الحالي.
لأن كل شيء يقرأ النظام اللوني، لا يحتاج مفتاح التبديل إلا إلى تغيير خاصية واحدة على الجذر:
\n:root[data-theme=\"light\"] { color-scheme: light; }\n:root[data-theme=\"dark\"] { color-scheme: dark; }دون data-theme يحتفظ الجذر بـ light dark ويتبع نظام التشغيل. ومع data-theme="dark" يُفرض الداكن، ويتبعه كل token. وكود JavaScript لعنصر تحكّم ثلاثي صغير جدًا:
const select = document.querySelector('#theme');\nconst saved = localStorage.getItem('theme');\nif (saved) document.documentElement.dataset.theme = saved;\n\nselect.addEventListener('change', () => {\n const value = select.value; // 'system' | 'light' | 'dark'\n if (value === 'system') {\n delete document.documentElement.dataset.theme;\n localStorage.removeItem('theme');\n } else {\n document.documentElement.dataset.theme = value;\n localStorage.setItem('theme', value);\n }\n});شغّل جزء الاستعادة في script صغير مضمّن داخل <head> ليُطبَّق الثيم المحفوظ قبل الرسم الأول.
color-scheme موروثة، وlight-dark() تُحسم بحسب قيمة كل عنصر. لذا لا يحتاج الـ hero الداكن دائمًا إلا إلى تصريح واحد:
.hero {\n color-scheme: dark;\n background: var(--surface);\n color: var(--text);\n}داخل الـ hero تُحسم --surface و--text و--card كلها إلى قيمها الداكنة، بما في ذلك بطاقة جلسة الـ keynote المتداخلة فيه، بينما تبقى بقية الصفحة فاتحة. والحيلة نفسها تعمل في الاتجاه المعاكس للوحة «معاينة طباعة» فاتحة داخل تطبيق داكن.
الوضع الداكن ليس الوضع الفاتح مقلوبًا. هذه بضع قواعد تصمد في المشاريع الحقيقية:
\n#0f172a أريح للعين ويترك مجالًا للارتفاع البصري (elevation).#1e293b، والنافذة المنبثقة (popover) على درجة أفتح منها. الظلال بالكاد تظهر على الخلفيات الداكنة.oklch(from var(--track) 72% calc(c * 0.8) h) ترفع الإضاءة وتخفّف التشبّع للأسطح الداكنة.لا تحتاج إلى تغيير نظام التشغيل لاختبار أيٍّ من هذا. تستطيع DevTools في Chrome محاكاة prefers-color-scheme: dark من لوحة Rendering، ولدى Firefox مفتاح في الـ Inspector. اختبر حالات المفتاح الثلاث والـ hero في كلٍّ منها، وافحص عناصر النماذج: فهي أول مكان يظهر فيه غياب color-scheme.
يستخدم التمرين النمط القديم: tokens مع تجاوز بـ prefers-color-scheme، ولا مفتاح تبديل. أعد كتابة الـ tokens بـ light-dark()، واربط data-theme على الجذر، واجعل الـ hero داكنًا في الوضعين. تضبط الفحوصات data-theme وتقرأ الألوان المحسوبة. وبعدها ستتأكّد من أن من يتنقّلون بلوحة المفاتيح يرون أين هم، في الثيمين كليهما.
color-scheme: light dark تخبر المتصفّح بأن الصفحة تدعم النظامين اللونيين، فتتبع عناصر النماذج وأشرطة التمرير والألوان الافتراضية إعداد المستخدم.","light-dark(A, B) تُرجع A أو B بحسب النظام اللوني المستخدم في العنصر، فيُعرَّف كل token مرة واحدة بدل مكانين.","مفتاح التبديل الثلاثي (النظام، فاتح، داكن) لا يحتاج إلا إلى ضبط color-scheme على الجذر؛ وكل قيمة light-dark() تتبعه.","لأن light-dark() تُحسم لكل عنصر على حدة، فإن color-scheme: dark على قسم واحد تجعل ذلك القسم داكنًا بينما تبقى بقية الصفحة فاتحة."],"further":[{"title":"light-dark() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark"},{"title":"color-scheme (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme"},{"title":"Improved dark mode default styling with color-scheme (web.dev)","url":"https://web.dev/articles/color-scheme"}],"quiz":[{"q":"كتبت --surface: light-dark(white, #0f172a) واستخدمتها على body، لكن الصفحة تبقى بيضاء في الوضع الداكن. ما الناقص؟
@media (prefers-color-scheme: dark) حول الـ token.","why":"هذه هي التقنية الأقدم؛ وlight-dark() وُجدت كي لا تحتاج إليها. إنها تقرأ النظام اللوني بدلًا من ذلك."},{"text":"color-scheme: light dark على الجذر (أو على العنصر).","why":"صحيح. دونها يكون النظام اللوني المستخدم فاتحًا، فتُرجع light-dark() قيمتها الأولى دائمًا."},{"text":"تسجيل --surface بـ @property.","why":"الـ custom properties غير المسجّلة تعمل جيدًا هنا؛ وlight-dark() تُحسم حيث يُستخدم الـ token."},{"text":"الوضع الداكن لا يعمل إلا حين يُكتب اللون بـ oklch().","why":"light-dark() تقبل أيّ صيغة ألوان."}],"answer":1},{"q":"يجب أن تبدو الواجهة الرئيسية (hero) في Waypoint داكنة دائمًا، حتى في الوضع الفاتح. ألوانها تأتي من tokens بـ light-dark(). ما أصغر تغيير ممكن؟
--hero- تحمل القيم الداكنة.","why":"ينجح، لكنه يضاعف مجموعة الـ tokens، وتنحرف النسختان لحظة يعدّل أحدهم إحداهما."},{"text":"أضف data-theme="dark" إلى عنصر الـ hero.","why":"هذه السمة لا تهمّ إلا إن كانت الـ CSS لديك تقرؤها هناك؛ ومفتاح التبديل في هذا الدرس يقرؤها على الجذر."},{"text":"أضف color-scheme: dark إلى .hero.","why":"صحيح. تُحسم light-dark() بحسب النظام اللوني المستخدم في كل عنصر، وهو موروث، فيلتقط الـ hero وكل ما بداخله القيم الداكنة."}],"answer":2},{"q":"ما وظيفة <meta name="color-scheme" content="light dark"> في رأس الـ HTML؟
light-dark().","why":"خاصية color-scheme في CSS تكفي لـ light-dark()؛ ووسم الـ meta يساعد في الرسم الأول."},{"text":"تحلّ محلّ media query prefers-color-scheme في كل ملفات الأنماط.","why":"الـ media queries تظل تعمل؛ ووسم الـ meta يعلن فقط الأنظمة اللونية التي تدعمها الصفحة."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"أعد كتابة الثيم بحيث:
\n--surface و--text و--card مرة واحدة بـ light-dark() (القيم الفاتحة: #ffffff و#1f2937 و#f8fafc؛ والداكنة: #0f172a و#e5e7eb و#1e293b). احذف الـ media query.data-theme="light" أو data-theme="dark" على <html> تفرض ذلك النظام؛ ودون السمة تتبع الصفحة إعداد النظام..hero داكنًا في كل الأوضاع، باستخدام الـ tokens نفسها (بلا ألوان خاصة بالـ hero).تضبط الفحوصات data-theme على <html> وتقرأ الألوان المحسوبة.
light-dark() لا تعمل إلا حين تسمح color-scheme بالداكن. ابدأ بـ color-scheme: light dark على :root.","قواعد مفتاح التبديل لا تغيّر إلا color-scheme: :root[data-theme="dark"] { color-scheme: dark; }، والأمر نفسه للفاتح.","للـ hero أضف color-scheme: dark; إلى .hero. عندها تُحسم var(--surface) فيه وvar(--card) في البطاقة المتداخلة إلى القيم الداكنة."],"explanation":"تختار light-dark() قيمة بحسب النظام اللوني المستخدم في العنصر الذي يُستخدم فيه الـ token، وcolor-scheme هي التي تضبط ذلك النظام. color-scheme: light dark على الجذر تتبع نظام التشغيل؛ وقواعد data-theme تتجاوزها بخاصية واحدة، فيتبعها كل token دون مجموعة tokens ثانية. ولأن light-dark() تُحسم لكل عنصر وcolor-scheme موروثة، فإن color-scheme: dark على .hero تجعل الـ hero وبطاقة الـ keynote داخله داكنين بينما تبقى البطاقة العادية فاتحة.