Prompt pour ajouter le mode sombre avec Tailwind CSS v4

Prompt d'agent IA pour ajouter un mode sombre adaptatif au système dans une application Next.js utilisant les variables CSS de Tailwind CSS v4 et next-themes, sans flash au chargement.

Donnez ce prompt à votre agent pour ajouter le mode sombre en utilisant le système de thème basé sur les variables CSS de Tailwind v4 et next-themes — évitant le flash de contenu non stylisé qui afflige les implémentations naïves de localStorage.

Prompt principal

You are working in a Next.js App Router project with TypeScript and Tailwind CSS v4.

Task: add dark mode with system preference detection and a manual toggle.

Requirements:
- Install `next-themes`.
- In `src/app/layout.tsx`, wrap the app in `<ThemeProvider attribute="class" defaultTheme="system" enableSystem>`.
  The `ThemeProvider` is a Client Component — create a wrapper `src/components/Providers.tsx` if
  the root layout must remain a Server Component.
- In `src/styles/global.css`, define CSS custom properties for both themes using the Tailwind v4
  `@theme` directive:
    - Light: `--color-bg: oklch(100% 0 0)`, `--color-text: oklch(9% 0 0)`.
    - Dark (inside `[class="dark"]` selector): override those variables.
  Apply them to the body as `background: var(--color-bg)` and `color: var(--color-text)`.
- Create `src/components/ThemeToggle.tsx` (Client Component) using `useTheme` from `next-themes`.
  It should cycle through light → dark → system on click and show a sun/moon/monitor icon.
  Use Tailwind's built-in `dark:` variant for icon visibility — do NOT use conditional classNames
  based on the `theme` string for icon color.
- Do not use `tailwind.config.ts` `darkMode: 'class'` — that is Tailwind v3 API. In v4, the
  `dark:` variant is class-based by default.
- Do NOT install lucide-react or any icon library — use SVG inline.

Stop and list all planned file changes before writing any code.

Notes d’implémentation

Dans Tailwind v4, le mode sombre via le préfixe dark: fonctionne automatiquement avec la classe .dark sur html — aucune entrée de configuration n’est nécessaire.
next-themes lit le thème sauvegardé depuis localStorage et définit la classe avant le premier rendu, ce qui empêche le FOUC.
Le ThemeProvider doit être côté client, mais le layout.tsx racine peut rester côté serveur en extrayant le provider vers un composant wrapper Providers.tsx marqué 'use client'.

Modifications de fichiers attendues

src/app/layout.tsx                     (edited — add Providers wrapper)
src/components/Providers.tsx           (new — Client Component with ThemeProvider)
src/components/ThemeToggle.tsx         (new — Client Component)
src/styles/global.css                  (edited — CSS custom properties for light/dark)
package.json                           (edited — add next-themes)

Critères d’acceptation

Au premier chargement avec le système réglé sur sombre, la page s’affiche en sombre sans flash.
Basculer ThemeToggle parcourt les modes clair, sombre et système ; la préférence persiste après rechargement.
Toutes les utilitaires dark: existants de Tailwind fonctionnent sans modification de configuration.
bun run build se termine avec le code 0.

Commandes de test

bun add next-themes
bun run typecheck
bun run build
bun run dev
# open DevTools, set system dark mode, reload — confirm no white flash
# click ThemeToggle three times and confirm cycle: light → dark → system

Erreurs courantes des IA

Ajouter darkMode: 'class' à un tailwind.config.ts qui n’existe pas dans un projet v4.
Encapsuler le composant serveur racine layout.tsx avec 'use client' au lieu d’extraire un composant Providers.
Utiliser le rendu conditionnel theme === 'dark' au lieu de la variante dark: de Tailwind, provoquant des décalages d’hydratation.
Oublier enableSystem sur ThemeProvider, rendant la détection de préférence système non fonctionnelle.

Prompt de correction

There's a white flash on load or a hydration mismatch. Fix in order:
1. Ensure `ThemeProvider` has `attribute="class"` and `enableSystem` props.
2. Make sure `Providers.tsx` (not `layout.tsx`) is marked `'use client'`.
3. Remove any `theme === 'dark'` conditional rendering from `ThemeToggle` — use `dark:` Tailwind
   variants instead so the server and client render the same HTML.
Show only the corrected diff.