Dunkles Design / Theme mit next-themes

Dunkles Design (Dark Mode)

Regeln

• Verwende next-themes für Next.js-Apps – umschließe die App mit <ThemeProvider attribute="class" defaultTheme="system">
• Definiere CSS-Variablen für Farben in :root (hell) und .dark (dunkel) und referenziere sie als var(--background)
• System-Präferenz-Erkennung: defaultTheme="system" respektiert die Media Query prefers-color-scheme
• Theme-Toggle-Komponente: Wechsel zwischen hell/dunkel/system – nutze den Hook useTheme() von next-themes
• Tailwind-Integration: Aktiviere darkMode: "class" in der Tailwind-Konfiguration, verwende das Präfix dark: für Überschreibungen
• Hydrierungs-Fix: Unterdrücke Hydrierungsfehler, indem der Theme-Toggle erst nach useEffect gemountet wird oder verwende suppressHydrationWarning
• Persistenz: next-themes speichert die Präferenz im localStorage und wendet sie als class auf <html> an
• Übergang: Füge transition-colors duration-200 zum Body hinzu, um einen sanften Theme-Wechsel zu ermöglichen

Muster

// Layout-Wrapper
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

// Theme-Toggle
"use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      {theme === "dark" ? "☀️" : "🌙"}
    </button>
  );
}

/* CSS-Variablen */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

Vermeiden

• Farben hardcodieren anstatt CSS-Variablen zu verwenden – macht Theming unmöglich
• suppressHydrationWarning auf <html> vergessen – führt zu Hydrierungsfehlern
• Flackern des falschen Themes: Stelle sicher, dass das next-themes-Skript vor dem ersten Paint läuft (standardmäßig der Fall)
• Nur Hell/Dunkel ohne System-Option zu unterstützen – respektiere die Betriebssystem-Präferenz des Benutzers