انتقل إلى محتوى الدرس

Native BS5.3 Dark Mode الوضع الداكن الأصيل ببوتستراب

أتقن نظام أوضاع الألوان والوضع الداكن الأصيل في بوتستراب 5.3 عبر سمة data-bs-theme الشاملة أو الموضعية، وكلاسات الأسطح التكيفية، ومبدّل الثيم بجافاسكريبت والثيمات المخصصة.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في الإصدارات السابقة لبوتستراب كان بناء وضع داكن حقيقي يتطلب تحميل ملف تنسيقات ثانٍ بالكامل أو مضاعفة مئات الكلاسات يدوياً مثل navbar-dark bg-dark وtable-dark. غيّر الإصدار 5.3 هذه المعادلة جذرياً بإطلاق منظومة أوضاع الألوان الأصيلة المبنية بالكامل على متغيرات CSS الحية.

بدلاً من ربط المكونات بألوان سداسية جامدة، بات كل مكوّن في بوتستراب 5.3 يقرأ خلفيته ونصه وحدوده من متغيرات دلالية مثل --bs-body-bg و--bs-body-color و--bs-border-color؛ وبمجرد إضافة السمة data-bs-theme="dark" تتبدل قيم هذه المتغيرات دفعة واحدة فينقلب الموقع بأكمله بانسجام بصري فوري.

الصف 2 صورة توضيحية
الشكل 1: مستويات تفعيل أوضاع الألوان والأسطح التكيفية في Bootstrap 5.3.
مخطط عمل أوضاع الألوان والوضع الداكن الشامل والموضعي في بوتستراب 5.3
مخطط عمل أوضاع الألوان والوضع الداكن الشامل والموضعي في بوتستراب 5.3
الصف 3 ملاحظة هامة