Tailwind CSS • المستوى الثالث • الدرس 3

دعم الوضع الداكن (Dark Mode & Color Schemes)

أهداف الدرس

تنسيق العناصر للثيم الفاتح افتراضياً وتخصيص الثيم الداكن بـ dark:.
فهم الفرق بين إستراتيجية media (نظام التشغيل) و class (التبديل اليدوي).
تنسيق الشبكة الكاملة من الخلفيات، الحدود، النصوص، والظلال لكل ثيم.
دمج transition-colors لانتقال سلس عند تبديل الوضع.

1. إسناد الألوان المتكيفة بـ Dark Mode

تجعل بادئة dark: تطبيق الألوان مقتصراً على حالة تفعيل الوضع الداكن، مما يعطي مرونة لا مثيل لها دون مضاعفة حجم الكود.

html

<!-- النمط الأساسي للوضعين -->
<div class="bg-white dark:bg-slate-900
            text-slate-800 dark:text-white">
  ...
</div>

<!-- الحدود -->
<div class="border border-slate-200 dark:border-slate-700">
  ...
</div>

<!-- الظلال -->
<div class="shadow-md dark:shadow-indigo-500/20">
  ...
</div>

<!-- انتقال سلس -->
<div class="transition-colors duration-300">
  ...
</div>

2. استراتيجيات تفعيل الوضع الداكن

media (الافتراضي)

يتبع تفضيل نظام التشغيل تلقائياً — لا يحتاج JavaScript.

darkMode: 'media'

class (يدوي)

يعتمد على إضافة صنف dark على <html> — يحتاج زر تبديل.

darkMode: 'class'

3. جدول مقارنة الألوان

العنصر	الوضع الفاتح	الوضع الداكن
الخلفية	bg-white	dark:bg-slate-900
النص	text-slate-800	dark:text-white
الحدود	border-slate-200	dark:border-slate-700
الظلال	shadow-md	dark:shadow-indigo-500/30

التطبيق العملي المباشر

تحدي الدرس الثالث: بناء واجهة بوضعين كاملين

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

أضف dark:text-sky-400 إلى عنوان البطاقة الأولى.
غلّف الكل في حاوية <div class="space-y-6 p-4">.
أضف بطاقة ثانية بـ bg-slate-50 dark:bg-slate-800 مع حدود وشبكة ألوان كاملة للوضعين.
أضف داخل البطاقة الثانية أيقونة دائرية بـ bg-indigo-100 dark:bg-indigo-500/20.
أضف زر تبديل onclick="document.documentElement.classList.toggle('dark')" للتبديل بين الوضعين.
أضف 3 شارات حالة (نجاح، تحذير، خطأ) بألوان متكيفة لكل وضع.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع