شرح صفوف ومحتوى الفقرة
لا تقتصر معمارية بوتستراب 5.3 على الوضعين الفاتح والداكن فحسب؛ إذ يمكنك ابتكار أوضاع لونية ثالثة ورابعة خاصة بهوية علامتك التجارية — كثيم القراءة الدافئ sepia أو ثيم الليل الأرجواني plum — بإنشاء محدد سمة مثل [data-bs-theme="plum"] وإعادة إسناد متغيرات السطح والنص والحدود بداخله فقط:
<style>
[data-bs-theme="plum"] {
--bs-body-color: #f5ebff;
--bs-body-bg: #231336;
--bs-border-color: #55347d;
}
</style>
<div class="p-3 rounded-3 border bg-body text-body"
data-bs-theme="plum">Custom Plum Mode Box</div>يلخص الجدول التالي أدوات وقواعد إدارة أوضاع الألوان في بوتستراب 5.3:
| الأداة أو المفهوم | الصيغة القياسية | الوظيفة المعمارية |
|---|---|---|
| الوضع الشامل للصفحة | <html data-bs-theme="dark"> | تحويل جميع المكونات والأسطح إلى الوضع الداكن |
| النطاق الجزئي لمكوّن | <div class="card" data-bs-theme="dark"> | عزل الثيم الداكن أو الفاتح على شجرة المكوّن فقط |
| كلاسات الأسطح التكيفية | .bg-body, .bg-body-secondary, .bg-body-tertiary | خلفيات تنقلب تلقائياً بدلاً من .bg-white الجامد |
| النصوص والشارات التكيفية | .text-body-secondary, .bg-*-subtle | تباين نصي مضمون في الوضعين الفاتح والداكن |
| رصد تفضيل النظام | matchMedia('(prefers-color-scheme: dark)') | مطابقة الوضع التلقائي مع إعداد نظام التشغيل |
| ثيم مخصص إضافي | [data-bs-theme="plum"] { --bs-body-bg: ... } | إنشاء أوضاع لونية جديدة عبر متغيرات CSS |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس منظومة أوضاع الألوان الأصيلة في بوتستراب 5.3، وتفعيل الوضع الداكن شاملاً أو موضعياً عبر data-bs-theme، واستبدال الألوان الثابتة بكلاسات الأسطح التكيفية، وبرمجة مبدّل الثيم الحي وإنشاء ثيمات مخصصة.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «متغيرات CSS في بوتستراب 5» للتعمق في متغيرات الجذر وقنوات RGB والمتغيرات المحلية للمكونات لتخصيص الواجهة بدون إعادة بناء Sass.