{
  "id": "add-dark-mode-with-tailwind",
  "type": "prompts",
  "category": "prompts",
  "locale": "de",
  "url": "/de/prompts/add-dark-mode-with-tailwind",
  "title": "Prompt zum Hinzufügen des Dark Mode mit Tailwind CSS v4",
  "description": "KI-Agent-Prompt zum Hinzufügen systembewusster Dark-Mode-Unterstützung in einer Next.js-App mit Tailwind CSS v4 CSS-Variablen und next-themes, ohne aufblitzenden Inhalt beim Laden.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript",
    "Tailwind"
  ],
  "tags": [
    "tailwind",
    "nextjs",
    "typescript"
  ],
  "difficulty": "easy",
  "updated": "2026-06-08",
  "markdown": "Geben Sie diesen Prompt Ihrem Agenten, um den Dark Mode mit dem CSS-variablenbasierten\nTheming von Tailwind v4 und `next-themes` hinzuzufügen – und so das Aufblitzen von unformatiertem Inhalt zu verhindern, das naive\n`localStorage`-Implementierungen plagt.\n\n## Haupt-Prompt\n\n```txt title=\"Main Prompt\"\nYou are working in a Next.js App Router project with TypeScript and Tailwind CSS v4.\n\nTask: add dark mode with system preference detection and a manual toggle.\n\nRequirements:\n- Install `next-themes`.\n- In `src/app/layout.tsx`, wrap the app in `<ThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem>`.\n  The `ThemeProvider` is a Client Component — create a wrapper `src/components/Providers.tsx` if\n  the root layout must remain a Server Component.\n- In `src/styles/global.css`, define CSS custom properties for both themes using the Tailwind v4\n  `@theme` directive:\n    - Light: `--color-bg: oklch(100% 0 0)`, `--color-text: oklch(9% 0 0)`.\n    - Dark (inside `[class=\"dark\"]` selector): override those variables.\n  Apply them to the body as `background: var(--color-bg)` and `color: var(--color-text)`.\n- Create `src/components/ThemeToggle.tsx` (Client Component) using `useTheme` from `next-themes`.\n  It should cycle through light → dark → system on click and show a sun/moon/monitor icon.\n  Use Tailwind's built-in `dark:` variant for icon visibility — do NOT use conditional classNames\n  based on the `theme` string for icon color.\n- Do not use `tailwind.config.ts` `darkMode: 'class'` — that is Tailwind v3 API. In v4, the\n  `dark:` variant is class-based by default.\n- Do NOT install lucide-react or any icon library — use SVG inline.\n\nStop and list all planned file changes before writing any code.\n```\n\n## Implementierungshinweise\n\n- In Tailwind v4 funktioniert der Dark Mode über das `dark:`-Präfix mit der `.dark`-Klasse auf `html` automatisch\n  – es ist kein Konfigurationseintrag erforderlich.\n- `next-themes` liest das gespeicherte Theme aus `localStorage` und setzt die Klasse vor dem ersten Rendern,\n  was den FOUC verhindert.\n- Der `ThemeProvider` muss clientseitig sein, aber das root-`layout.tsx` kann serverseitig bleiben, indem\n  der Provider in eine `Providers.tsx`-Wrapper-Komponente mit `'use client'` ausgelagert wird.\n\n## Erwartete Dateiänderungen\n\n```txt\nsrc/app/layout.tsx                     (edited — add Providers wrapper)\nsrc/components/Providers.tsx           (new — Client Component with ThemeProvider)\nsrc/components/ThemeToggle.tsx         (new — Client Component)\nsrc/styles/global.css                  (edited — CSS custom properties for light/dark)\npackage.json                           (edited — add next-themes)\n```\n\n## Abnahmekriterien\n\n- Beim ersten Laden mit systemseitig eingestelltem Dark Mode wird die Seite dunkel ohne Aufblitzen gerendert.\n- Das Umschalten von ThemeToggle durchläuft die Modi Hell, Dunkel und System; die Präferenz bleibt beim Neuladen erhalten.\n- Alle vorhandenen `dark:` Tailwind-Dienstprogramme funktionieren ohne Konfigurationsänderungen.\n- `bun run build` beendet sich mit Exit-Code 0.\n\n## Testbefehle\n\n```bash\nbun add next-themes\nbun run typecheck\nbun run build\nbun run dev\n# open DevTools, set system dark mode, reload — confirm no white flash\n# click ThemeToggle three times and confirm cycle: light → dark → system\n```\n\n## Häufige KI-Fehler\n\n- Hinzufügen von `darkMode: 'class'` zu einer `tailwind.config.ts`, die in einem v4-Projekt nicht existiert.\n- Das root Server Component `layout.tsx` mit `'use client'` umschließen, anstatt eine Providers-Komponente auszulagern.\n- Verwendung von `theme === 'dark'` für bedingtes Rendering anstelle der `dark:`-Variante von Tailwind, was zu Hydrierungsfehlern führt.\n- Vergessen von `enableSystem` auf `ThemeProvider`, sodass die Systempräferenz-Erkennung nicht funktioniert.\n\n## Fehlerbehebungs-Prompt\n\n```txt title=\"Fix Prompt\"\nThere's a white flash on load or a hydration mismatch. Fix in order:\n1. Ensure `ThemeProvider` has `attribute=\"class\"` and `enableSystem` props.\n2. Make sure `Providers.tsx` (not `layout.tsx`) is marked `'use client'`.\n3. Remove any `theme === 'dark'` conditional rendering from `ThemeToggle` — use `dark:` Tailwind\n   variants instead so the server and client render the same HTML.\nShow only the corrected diff.\n```"
}