الوضع الداكن

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

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

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