⚡Design

Dark Mode implementieren

Dark Mode fuer deine App -- User lieben es

Dark Mode ist kein Nice-to-have mehr. Die meisten Nutzer erwarten es. Mit Tailwind und next-themes ist es in 5 Minuten eingebaut.

Pro-Tip — Der schnelle Weg
Nutze next-themes statt eigener Logik -- das Package handhabt System-Preference, localStorage und Hydration automatisch.
Seite 1
1

next-themes installieren

Installiere das Package fuer Theme-Management.

npm install next-themes
2

Tailwind konfigurieren

Setze darkMode auf "class" in deiner Tailwind-Config.

// tailwind.config.ts
module.exports = {
 darkMode: "class",
 // ...
};
3

ThemeProvider einbauen

Wrappe deine App mit dem ThemeProvider in layout.tsx.

import { ThemeProvider } from "next-themes";


export default function RootLayout({ children }) {
 return (
 <html suppressHydrationWarning>
 <body>
 <ThemeProvider attribute="class" defaultTheme="system">
 {children}
 </ThemeProvider>
 </body>
 </html>
 );
}
4

Toggle-Button bauen

Erstelle einen Button zum Umschalten zwischen Light und Dark.

"use client";
import { useTheme } from "next-themes";


export function ThemeToggle() {
 const { theme, setTheme } = useTheme();
 return (
 <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
 {theme === "dark" ? "Light" : "Dark"}
 </button>
 );
}
5

Dark-Styles hinzufuegen

Nutze den dark:-Prefix in deinen Tailwind-Klassen.

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
 Content der sich anpasst
</div>
Seite 2
Warum das funktioniert
  • next-themes loest alle typischen Dark-Mode-Probleme: Flicker, Hydration, Persistence.
  • Tailwinds dark:-Prefix macht das Styling intuitiv und konsistent.
  • User koennen zwischen System, Light und Dark waehlen -- maximale Flexibilitaet.
Tipps
  • suppressHydrationWarning auf html ist wichtig, sonst gibt es Hydration-Fehler.
  • defaultTheme='system' respektiert die Betriebssystem-Einstellung des Users.
  • Teste beide Modes gruendlich -- vergessene Farben fallen sofort auf.
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen