انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: أوضاع الألوان والوضع الداكن في بوتستراب 5

Live JS Theme Switcher برمجة مبدّل الوضع الفاتح والداكن

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

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

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

لبناء مبدّل ثيم احترافي يحترم المستخدم، يجمع السكريبت القياسي ثلاث مهام متسلسلة: أولاً قراءة الاختيار المحفوظ في localStorage، وثانياً الرجوع التلقائي إلى تفضيل نظام التشغيل عبر window.matchMedia('(prefers-color-scheme: dark)') عند عدم وجود اختيار سابق أو عند اختيار الوضع التلقائي auto، وثالثاً تحديث السمة data-bs-theme على document.documentElement فور نقر الزر.

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (أوضاع الألوان والوضع الداكن في بوتستراب 5)