Dark Theme Project

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <title>Dark Theme</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors">
  <div class="mx-auto max-w-md p-8">
    <div class="rounded-xl bg-white dark:bg-gray-800 p-6 shadow-lg">
      <h2 class="text-xl font-bold text-gray-900 dark:text-white">
        Dark Theme Card
      </h2>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        এই কার্ড dark mode সমর্থন করে।
      </p>
      <button
        id="toggle"
        class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition-colors"
      >
        Toggle Dark Mode
      </button>
    </div>
  </div>

  <script>
    document.getElementById("toggle").addEventListener("click", () => {
      document.documentElement.classList.toggle("dark");
    });
  </script>
</body>
</html>

// Dark mode toggle
function toggleDarkMode() {
  document.documentElement.classList.toggle("dark");

  // Save preference
  const isDark = document.documentElement.classList.contains("dark");
  localStorage.setItem("darkMode", isDark);
}

// Load saved preference
if (localStorage.getItem("darkMode") === "true") {
  document.documentElement.classList.add("dark");
}