في هذا الدرس 5تصفّح المواضيع
في الإصدارات السابقة لبوتستراب كان بناء وضع داكن حقيقي يتطلب تحميل ملف تنسيقات ثانٍ بالكامل أو مضاعفة مئات الكلاسات يدوياً مثل navbar-dark bg-dark وtable-dark. غيّر الإصدار 5.3 هذه المعادلة جذرياً بإطلاق منظومة أوضاع الألوان الأصيلة المبنية بالكامل على متغيرات CSS الحية.
بدلاً من ربط المكونات بألوان سداسية جامدة، بات كل مكوّن في بوتستراب 5.3 يقرأ خلفيته ونصه وحدوده من متغيرات دلالية مثل --bs-body-bg و--bs-body-color و--bs-border-color؛ وبمجرد إضافة السمة data-bs-theme="dark" تتبدل قيم هذه المتغيرات دفعة واحدة فينقلب الموقع بأكمله بانسجام بصري فوري.
تعمل سمة data-bs-theme بمرونة هرمية عبر شجرة المستند في مستويين متكاملين:
- التفعيل الشامل للصفحة كلها: ضع
data-bs-theme="dark"على الوسم الجذري<html>لترث جميع الحاويات والبطاقات والجداول وحقول النماذج والنوافذ المنبثقة الوضع الداكن تلقائياً. - التفعيل الموضعي لمكوّن منفرد: أبقِ الصفحة في الوضع الفاتح الافتراضي، وضع
data-bs-theme="dark"على بطاقة تسعير مميزة.cardأو قائمة منسدلة.dropdown-menuأو تذييل سفلي فقط، بل ويمكنك وضعdata-bs-theme="light"على عنصر داخلي لعكس الثيم محلياً!
<div class="row g-3">
<div class="col-md-6">
<div class="card p-3">Default Light Card</div>
</div>
<div class="col-md-6">
<div class="card p-3" data-bs-theme="dark">
<h3 class="h6">Scoped Dark Card</h3>
<p class="text-body-secondary mb-0">Scoped dark</p>
</div></div></div>الخطأ الأكثر شيوعاً الذي يفسد الوضع الداكن هو استخدام كلاسات الألوان الفيزيائية الجامدة مثل .bg-white و.bg-light و.text-dark؛ فهذه الكلاسات تظل بيضاء ساطعة ونصها أسود قاتم حتى بعد تفعيل الوضع الداكن فتختفي الكلمات تماماً!
القاعدة الذهبية في بوتستراب 5.3 هي استبدالها دائماً بكلاسات الأسطح والنصوص التكيفية: استخدم .bg-body للسطح الرئيسي، و.bg-body-secondary و.bg-body-tertiary للبطاقات الفرعية والخلفيات الهادئة، و.text-body مع .text-body-secondary للنصوص، وادمج .bg-*-subtle مع .text-*-emphasis للتنبيهات الملونة.
<!-- Root html has data-bs-theme="dark" -->
<div class="p-3 rounded-3 bg-body-tertiary border">
<h2 class="h5 text-body">Adaptive Dashboard Panel</h2>
<p class="text-body-secondary mb-2">Readable subtitle</p>
<span class="badge bg-success-subtle
text-success-emphasis">Healthy Cluster</span>
</div>لبناء مبدّل ثيم احترافي يحترم المستخدم، يجمع السكريبت القياسي ثلاث مهام متسلسلة: أولاً قراءة الاختيار المحفوظ في localStorage، وثانياً الرجوع التلقائي إلى تفضيل نظام التشغيل عبر window.matchMedia('(prefers-color-scheme: dark)') عند عدم وجود اختيار سابق أو عند اختيار الوضع التلقائي auto، وثالثاً تحديث السمة data-bs-theme على document.documentElement فور نقر الزر.
<button id="themeBtn" type="button"
class="btn btn-outline-primary">
Toggle Dark / Light Mode
</button>
<div class="card mt-3 p-3 bg-body-tertiary">
<p class="mb-0 text-body-secondary">Live adaptive card</p>
</div>لا تقتصر معمارية بوتستراب 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.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Color Mode Attribute سمة وضع الألوان
- سمة data-bs-theme القياسية في بوتستراب 5.3 للتحكم بأوضاع الألوان على مستوى الصفحة أو المكوّن.
- للمراجعة
- 02 Scoped Theme الثيم الموضعي المعزول
- تطبيق سمة data-bs-theme على حاوية مكوّن محدد فقط دون التأثير على بقية عناصر الصفحة.
- للمراجعة
- 03 Adaptive Surface Utility كلاس السطح التكيفي
- كلاسات الخلفيات الدلالية التي تنعكس درجاتها تلقائياً بين الفاتح والداكن بدلاً من bg-white الثابت.
- للمراجعة
- 04 System Color Preference تفضيل الألوان في نظام التشغيل
- ميزة استعلام الوسائط التي تكشف ما إذا كان المستخدم يفعّل الوضع الداكن في نظام تشغيل جهازه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 FOUC FOUC
- Flash of Unstyled or Wrong-Theme Content
- الوميض الأبيض الخاطف عند فتح الصفحة الداكنة، ويُمنع بوضع كود تهيئة الثيم في وسم head.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- تتيح تبديل الثيم لحظياً في المتصفح عبر المتغيرات القياسية دون تحميل ملف خارجي إضافي.
- للمراجعة
- 03 OS OS
- Operating System
- يوفر للمتصفح تفضيل المظهر الفاتح أو الداكن العام للمستخدم عبر خاصية prefers-color-scheme.
- للمراجعة
- 04 WCAG WCAG
- Web Content Accessibility Guidelines
- معايير التباين البصري الواجب التحقق منها في الوضعين الفاتح والداكن وأي ثيم مخصص.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
استبدل الكلاسات الثابتة bg-white وtext-dark بكلاسات bg-body-tertiary وtext-body وtext-body-secondary مع شارة bg-primary-subtle وtext-primary-emphasis داخل حاوية تحمل data-bs-theme="dark".
-
عرّف محدد السمة [data-bs-theme="midnight"] لإعادة ضبط متغيرات --bs-body-bg و--bs-body-color و--bs-border-color، وطبّق السمة على صندوق يحمل p-3 border rounded-3 bg-body text-body.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما السمة القياسية التي تفعل الوضع الداكن الأصيل على كامل مستند بوتستراب 5.3؟
توضع السمة data-bs-theme="dark" على وسم <html> الجذري لتبديل متغيرات الألوان في الصفحة كلها.
هل يمكن وضع data-bs-theme="dark" على عنصر .card أو .dropdown-menu منفرد مع بقاء باقي الصفحة في الوضع الفاتح؟
صحيح؛ يدعم بوتستراب 5.3 النطاق الموضعي للثيم على أي مكوّن وأبنائه دون تغيير بقية الصفحة.
لماذا تتعطل جمالية وتناسق البطاقة المزودة بكلاسي "bg-white text-dark" عند التحويل إلى الوضع الداكن؟
لأن bg-white وtext-dark ألوان فيزيائية جامدة لا تتغير مع الثيم، ويجب استبدالها بـ bg-body وtext-body التكيفية.
أي كلاس خلفية دلالي يمنحك سطحاً فرعياً هادئاً يتكيف تلقائياً مع الوضعين الفاتح والداكن؟
يرتبط الكلاس .bg-body-tertiary بالمتغير التكيفي --bs-tertiary-bg فيتأقلم تلقائياً في الوضعين.
ما الواجهة البرمجية في المتصفح التي تكشف تفضيل الوضع الداكن في نظام تشغيل الزائر؟
تُستخدم دالة window.matchMedia('(prefers-color-scheme: dark)') لفحص ومتابعة تفضيل النظام.
هل يُفضل وضع سكريبت تهيئة سمة data-bs-theme داخل وسم <head> لمنع الوميض الأبيض الخاطف عند تحديث الصفحة الداكنة؟
صحيح؛ ضبط السمة قبل بدء رسم عناصر body يمنع وميض الخلفية البيضاء المزعج.
كيف تنشئ وضعاً لونياً ثالثاً مخصصاً باسم "sepia" في بوتستراب 5.3 دون الحاجة لإعادة ترجمة Sass؟
بتعريف متغيرات CSS مثل --bs-body-bg و--bs-body-color داخل المحدد [data-bs-theme="sepia"].
هل يتطلب تشغيل الوضع الداكن في بوتستراب 5.3 تنزيل ملف خارجي منفصل باسم bootstrap-dark.min.css؟
خطأ؛ متغيرات الوضع الداكن مدمجة أصلاً داخل ملف bootstrap.min.css القياسي ونسخته العربية.