Dark Mode

امروزه خیلی از وب‌سایت‌ها و اپلیکیشن‌ها حالت تاریک دارن.
این ویژگی:

  • باعث راحتی چشم در شب میشه 👀🌙

  • مصرف باتری رو در موبایل کمتر می‌کنه 🔋

  • تجربه کاربری مدرن‌تری ایجاد می‌کنه ⚡

🔹 فعال‌سازی Dark Mode در Tailwind

در فایل tailwind.config.js مشخص کن:

module.exports = {
  darkMode: 'media', // یا 'class'
  content: ["./src/**/*.{html,js}"],
  theme: { extend: {} },
  plugins: [],
}

📌 دو حالت وجود داره:

  • media → به صورت خودکار بر اساس تنظیمات سیستم کاربر (light/dark)

  • class → با اضافه کردن کلاس dark به تگ <html> یا <body> حالت تاریک فعال میشه

🔹 استفاده از کلاس‌های Dark Mode

<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded">
  این متن در حالت روشن سیاهه، در حالت تاریک سفید میشه.
</div>

✅ وقتی Dark Mode فعاله → پس‌زمینه خاکستری تیره میشه و متن سفید.

🔹 تغییر حالت با دکمه (در حالت class)

<html class="dark">
  <body>
    <button onclick="document.documentElement.classList.toggle('dark')"
            class="bg-gray-200 dark:bg-gray-800 text-black dark:text-white px-4 py-2 rounded">
      تغییر حالت
    </button>
  </body>
</html>

📌 با کلیک روی دکمه، بین حالت روشن و تاریک جابه‌جا میشه.

🔹 مثال کامل کارت

<div class="max-w-sm p-6 bg-white dark:bg-gray-800 rounded-lg shadow">
  <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">عنوان</h2>
  <p class="text-gray-600 dark:text-gray-400">این یک کارت واکنش‌گرا با حالت تاریک است.</p>
</div>

🔹 نکته مهم

  • darkMode: 'media' → ساده‌تر ولی کنترل کمتر

  • darkMode: 'class' → کنترل کامل با جاوااسکریپت

  • می‌تونی همزمان برای پس‌زمینه، متن، دکمه و … حالت تاریک تعریف کنی