متغيرات CSS لتبديل السمات

تكون الخصائص المخصصة في CSS، أو المتغيرات، المعرّفة على :root متاحةً عالميًا في ورقة الأنماط بأكملها. عرّف لوحة ألوان كاملة مرة واحدة — للخلفيات وألوان النصوص والأسطح والحدود — ثم أشر إليها في كل مكان. يجعل هذا المصدر الموحد للحقيقة تبديل السمات أمرًا بسيطًا.

عند تعيين السمة data-theme="dark" على document.documentElement، يتجاوز محدد CSS مثل [data-theme='dark'] متغيرات الجذر بقيم داكنة. وتشير المكونات إلى var(--color-bg)، فتلتقط القيم الجديدة تلقائيًا دون أي تغييرات في التعليمات البرمجية.

عرّف على الأقل: --color-bg لخلفية الصفحة، و--color-text للنص الأساسي، و--color-primary للون العلامة التجارية، و--color-surface لخلفية البطاقة أو اللوحة، و--color-border للفواصل. تمنع مجموعة الرموز المتسقة ظهور قيم ألوان عشوائية داخل المكونات.

في CSS الخاص بالمكوّن، أشر إلى المتغيرات مثل background: var(--color-bg) وcolor: var(--color-text). ويمكنك أيضًا توفير قيمة احتياطية: var(--color-bg, #ffffff). يحل المتصفح قيمة المتغير وقت الرسم، لذا تعمل فئة واحدة مع السمتين الفاتحة والداكنة.

أضف transition: background-color 200ms, color 200ms إلى المحدد :root. عند تغيّر السمة data-theme، ستنتقل جميع العناصر التي تستخدم متغيرات CSS إلى قيمها الجديدة في الوقت نفسه. يضفي ذلك مظهرًا متقنًا دون الحاجة إلى كتابة تعليمات تحريك في JS.

تُعد إدارة السمة عبر متغيرات CSS أفضل من تعيين الأنماط المضمّنة من JavaScript. يتولى المتصفح جميع عمليات إعادة حساب الأنماط بشكل أصلي، ولا تحدث عمليات إعادة عرض إضافية في React لكل مكوّن فرعي يستخدم السمة، كما يتولى تسلسل CSS التوارث تلقائيًا. ولا يحتاج JS إلا إلى تبديل سمة واحدة على عنصر الجذر.

يمكنك دمج متغيرات CSS مع الاستعلام @media (prefers-color-scheme: dark) باعتباره بديلًا يعتمد على CSS فقط. عرّف التجاوزات الداكنة داخل استعلام الوسائط بالإضافة إلى محدد data-theme أو بدلًا منه. يضمن ذلك عمل الوضع الداكن حتى قبل تشغيل JavaScript.

يضع الأسلوب الأكثر موثوقية الآليتين معًا: يوفّر استعلام @media الإعداد الافتراضي لنظام التشغيل، بينما تتيح سمة data-theme للمستخدم التجاوز عبر JavaScript. عند وجود السمة، تكون لها الأولوية بفضل درجة التحديد؛ وعند غيابها، يسري استعلام الوسائط.

بالنسبة إلى الصور التي تبدو سيئة على الخلفيات الداكنة، استخدم عنصر HTML‏ picture مع عنصر فرعي source media="(prefers-color-scheme: dark)". يختار المتصفح النسخة الداكنة تلقائيًا. وبالنسبة إلى أيقونات SVG في CSS، يمكنك استخدام filter: invert(1) كحل تقريبي سريع.

يمكن أيضًا حصر نطاق متغيرات CSS في مكونات فردية، وذلك بتعريفها على عنصر الجذر للمكوّن بدلًا من :root. يتيح ذلك تطبيق سمات خاصة بكل مكوّن، مثل شريط جانبي له رمز خلفية خاص يختلف عن خلفية الصفحة، مع استمرار تبديل الجميع بشكل صحيح عند استخدام مفتاح السمة العام.

يعرض Chrome DevTools القيم المحلولة لمتغيرات CSS في لوحة Styles. انقر على مرجع المتغير للانتقال إلى تعريفه. يسهّل ذلك التحقق من تطبيق الرمز الداكن أو الفاتح الصحيح على أي عنصر. ويمكنك أيضًا تعديل قيم المتغيرات مباشرةً في اللوحة.

ما محدد CSS المستخدم لتعريف الخصائص المخصصة العامة في CSS التي تنطبق على المستند بأكمله؟

توفر الخصائص المخصصة في CSS على :root نظامًا مركزيًا من الرموز للسمات. بدّل سمة data-theme على عنصر html لتبديل السمات فورًا. أضف انتقالات CSS لتحريك سلس، واستخدم استعلام الوسائط prefers-color-scheme كبديل يعتمد على CSS فقط، وتجنب تجاوزات الأنماط في JS لكل مكوّن.