📌 Next.js + Tailwind CSS ile Dinamik Tema (Light/Dark Mode)

1️⃣ next-themes Kütüphanesi

Tema yönetimini kolaylaştırmak için next-themes kütüphanesi kullanılır.
Kurulum:

npm install next-themes

Amacı: Tema durumunu global olarak yönetmek ve tüm bileşenlerden erişilebilir hale getirmek.

2️⃣ ThemeProvider ile Uygulamayı Sarmalama

ThemeProvider, uygulamanın root seviyesinde (layout.jsx veya _app.js) sarılır.
suppressHydrationWarning prop’u, sunucu ve istemci tarafı HTML uyuşmazlıklarını gizler, özellikle tema başlangıcında.

// app/layout.jsx
import { ThemeProvider } from 'next-themes'

export default function Layout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

✅ Böylece tüm sayfalar ve bileşenler, mevcut tema bilgisini useTheme hook’u ile alabilir.

3️⃣ useTheme Hook'u ile Tema Değiştirme

useTheme hook’u ile mevcut tema (theme) ve tema değiştirme fonksiyonu (setTheme) elde edilir.

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      Current theme: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

Dinamik olarak butonlar ile tema değiştirilebilir.
theme değeri "light", "dark" veya "system" olabilir.
"system": Kullanıcının işletim sistemi temasına uyum sağlar.