Activer le dark mode dans Next.js

Le dark mode est devenu un standard pour améliorer l’expérience utilisateur. Voici comment l’implémenter simplement dans une application Next.js avec next-themes et le design system shadcn/ui.

1. installer les dépendances

npm install next-themes
npx shadcn-ui init
npx shadcn-ui add dropdown-menu
npm install lucide-react

2. Créer un ThemeProvider

Ce composant va envelopper votre application pour gérer le thème global.

"use client";

import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return <NextThemesProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
    {children}
  </NextThemesProvider>;
}

3. Ajouter le ThemeProvider dans le layout

Dans app/layout.tsx, entourez votre application avec le provider.

import { ThemeProvider } from "@/components/theme-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr" suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

4. Créer un composant toggle de thème

Utilisez le composant dropdown-menu de shadcn/ui pour proposer le choix entre clair, sombre et système.

"use client";

import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Sun, Moon } from "lucide-react";

export function ModeToggle() {
  const { setTheme } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" aria-label="Changer de thème">
          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Clair</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Sombre</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>Système</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

5. Intégrer le composant toggle dans votre interface

Placez ce composant dans votre header ou navbar pour permettre à l’utilisateur de changer facilement de thème.