Ajouter un mode sombre à Next.js et Tailwind CSS

Dans ce post, on va voir comment implémenter un mode sombre dans une application Next.js en utilisant Tailwind CSS avec la librairie Next-Themes.

Ouvrir la table des matières

Mettre en place le projet
Implémenter le mode sombre
Next-Themes
Accessibilité
Toggle Theme
Bonus

Mettre en place le projet

Pour commencer, on a besoin d’une application Next.js avec Tailwind CSS configurée. Tu peux utiliser le script suivant pour créer ton application Next.js avec Tailwind CSS :

pnpx create-next-app@latest

Implémenter le mode sombre

Pour implémenter le mode sombre, il faudra ajouter la propriété dark: dans le fichier tailwind.config.ts du projet. Par exemple, tu peux utiliser className=“text-red-200 dark:text-red-500”. En mode normal, le texte sera de la couleur rouge variant 200 et en mode sombre, le texte sera de la couleur rouge variant 500.

const config: Config = {
  darkMode: "class",
  // le reste de ta config tailwind
};

Tailwind CSS applique le thème quand la classe dark est présente dans le nœud HTML.

Next-Themes

On a besoin de switcher entre le mode sombre et le mode clair tout en stockant le thème actuel pour que, quand l’utilisateur reviendra sur la page, le thème ne soit pas réinitialisé mais qu’il soit le même qu’avant qu’il se soit déconnecté du site.

Pour installer la librairie Next-Themes :

pnpm install next-themes

Ensuite, on aura besoin d’un fichier theme-provider.tsx qui tournera côté client et non côté serveur. Next-themes stocke le thème actuel dans le localStorage du navigateur. La propriété attribute="class" permet d’ajouter la classe dark et light dans l’élément HTML de la page.

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

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => (
  <NextThemesProvider attribute="class">{children}</NextThemesProvider>
);

Et pour finir, on va devoir wrapper notre application en utilisant ce provider.

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ThemeProvider } from "./theme-provider";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Accessibilité

Il est important que ton application soit accessible pour tout le monde. Lors de ton choix de couleurs pour chaque élément de ton site, assure-toi que la couleur du texte, des bordures et des fonds soit assez claire et accessible.

Toggle Theme

Enfin, on va avoir besoin d’un bouton qui permet de changer le thème. L’avantage de Next-Themes, c’est qu’il nous fournit une très bonne api. Là, on va utiliser le hook useTheme pour savoir quel est le thème actuel, dark ou light, et changer le thème avec la méthode setTheme qui est fournie avec le hook useTheme.

"use client";
import { useTheme } from "next-themes";
export const ThemeToggle = () => {
  const { theme, setTheme } = useTheme();
  const toggle = () => setTheme(theme === "dark" ? "light" : "dark");
  return (
    <button onClick={toggle} className="rounded-lg border px-2">
      {theme}
    </button>
  );
};

Ensuite, on importe ce composant dans la page ou, dans ton cas, ça peut être dans un Header ou un Footer.

import Image from "next/image";
import { ThemeToggle } from "./_components/toggle-theme";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ThemeToggle />
    </main>
  );
}

Bonus

Si tu as besoin d’une palette de couleurs ou de générer ta propre palette, utilise Radix Colors.

Tout doux! Tu viens de mettre en place un mode sombre pour ton application.

Crédit :

Poster de l’article par : Doran

🐍

Table of contents