الوضع الداكن

الطريقة الصحيحة للوضع الداكن لا تعيد كتابة الألوان في كل قاعدة، بل تجعل الألوان كلّها متغيّرات على :root، فلا تستعمل المكوّنات إلا var(--bg) وما يشبهها، وعندما تعيد تعريف المتغيّرات وحدها يتغيّر كل شيء معًا.

وتعيد تعريفها في موضعين: داخل @media (prefers-color-scheme: dark) لتتبع الصفحة إعداد النظام تلقائيًّا، وفي :root[data-theme="dark"] لمن اختار الوضع الداكن بنفسه. واكتب مع كل سمة (theme) قيمة color-scheme المناسبة لها، ليلوّن المتصفح الأزرار والحقول وأشرطة التمرير بحسبها.

وانتبه إلى هذه المشكلة: المستخدم الذي نظامه داكن واختار «فاتح» في موقعك يبقى عالقًا في الوضع الداكن، لأن استعلام الوسائط ما زال ينطبق عليه، والحلّ أن تستثني هذا الاختيار داخل الاستعلام بـ :root:not([data-theme="light"]).