@import "tailwindcss";
 
:root {
  --background: #ffffff;
  --foreground: #171717;
}
 
.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
}
 
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans, Arial, Helvetica, sans-serif);
  transition: background 0.3s ease, color 0.3s ease; /* smooth toggle */
}

"use client";
import { ThemeProvider } from "next-themes";
import React, { useState, useEffect } from "react";
 
export default function ThemeProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  const [mounted, setMounted] = useState(false);
 
  useEffect(() => setMounted(true), []);
 
  if (!mounted) return <>{children}</>;
 
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      enableColorScheme
    >
      {children}
    </ThemeProvider>
  );
}

"use client";
import { useTheme } from "next-themes";
import { Sun, Moon } from "lucide-react";
import { useEffect, useState } from "react";
 
export default function ThemeToggleButton() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
 
  useEffect(() => setMounted(true), []);
 
  if (!mounted) return null;
 
  const isDark = theme === "dark";
 
  return (
    <button
      onClick={() => setTheme(isDark ? "light" : "dark")}
      className="p-2 rounded-full transition-colors duration-200 focus:outline-none"
    >
      {isDark ? <Sun /> : <Moon />}
    </button>
  );
}

<div className="min-h-screen bg-background text-foreground transition-colors">
  <Navbar />
  <main className="p-8">
    <h2 className="text-3xl font-bold mb-4">ডার্ক মোডে স্বাগতম!</h2>
    <p>
      এই ফিচারটি Next.js + Tailwind v4 + CSS variables ব্যবহার করে তৈরি হয়েছে।
    </p>
  </main>
</div>