Magdy Atef Zahran

الـ Dark Mode في Tailwind CSS

الـ Dark Mode مش “ستايل غامق” لكنه جزء أساسي من أي UI محترم وTailwind مديالك طريقة مرنة وسهلة للتحكم فيه.

تفعيل الـ Dark Mode

افتح ملف tailwind.config.js وهتلاقي حاجة زي دي:

module.exports = { darkMode: "class", // أو "media" theme: { ... }, plugins: [], }

media: بيستخدم إعداد النظام (لو الجهاز بتاع المستخدم على الوضع الليلي).
class: بتتحكم انت يدويًا، غالبًا بإضافة class اسمه dark على <html> أو <body>.

استخدام الـ Dark Mode في الكلاسات

Tailwind بيخليك تعمل شرط للستايل عن طريق prefix:

<div className="bg-white text-black dark:bg-gray-900 dark:text-white"> Hello Dark Mode </div>

في الوضع العادي = خلفية بيضا ونص أسود.
في الوضع الليلي = خلفية غامقة ونص أبيض.

التبديل بين Light/Dark يدويًا

لو بتستخدم darkMode: "class"، ممكن تضيف toggle button:

<button onClick={() => document.documentElement.classList.toggle("dark")} className="px-4 py-2 bg-gray-200 dark:bg-gray-800 dark:text-white" > Toggle Theme </button>

تطبيق عملي – Card بيدعم الوضع الليلي

<div className="p-6 rounded-xl shadow-md bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-200"> <h2 className="text-xl font-bold">Dark Mode Card</h2> <p>جرب تبدل الوضع وشوف النتيجة 👀</p> </div>

الخلاصه

Tailwind مخلي الـ Dark Mode جزء طبيعي من الستايلنج.
عندك اختيارين: تعتمد على إعدادات النظام (media) أو تتحكم فيه يدويًا (class).
مجرد تضيف prefix dark: لأي class، يبقى عندك UI يشتغل في الوضعين.