Theme

Configuration du ThemeProvider, hook useTheme, composant ThemeToggle et configuration du mode sombre.

Apercu

Le systeme de theming de packages/ui fournit la prise en charge du mode sombre dans toute l'application. Il comprend un ThemeProvider pour gerer le theme actuel, un hook useTheme pour un acces programmatique et un composant bouton ThemeToggle.

Configuration

Enveloppez votre application avec ThemeProvider dans le layout racine :

// app/layout.tsx
import { ThemeProvider } from "@saas/ui";

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

Props du Provider

Prop	Type	Defaut	Description
`attribute`	`"class" \| "data-theme"`	`"class"`	Comment le theme est applique au `<html>`
`defaultTheme`	`"light" \| "dark" \| "system"`	`"system"`	Theme initial
`enableSystem`	`boolean`	`true`	Respecte la preference du systeme d'exploitation
`disableTransitionOnChange`	`boolean`	`false`	Empeche le flash lors du changement de theme

Le suppressHydrationWarning sur <html> est necessaire pour eviter les avertissements de discordance d'hydratation React, car la classe de theme est definie avant que React ne s'hydrate.

Composant ThemeToggle

Placez le bouton de bascule n'importe ou dans votre interface (generalement dans le header ou les parametres) :

import { ThemeToggle } from "@saas/ui";

<ThemeToggle />

Le bouton de bascule alterne entre les modes clair et sombre, affichant une icone de soleil ou de lune en consequence.

Hook useTheme

Accedez au theme actuel de maniere programmatique :

"use client";

import { useTheme } from "@saas/ui";

export default function MyComponent() {
  const { theme, setTheme, resolvedTheme } = useTheme();

  return (
    <div>
      <p>Current theme: {resolvedTheme}</p>
      <button onClick={() => setTheme("light")}>Light</button>
      <button onClick={() => setTheme("dark")}>Dark</button>
      <button onClick={() => setTheme("system")}>System</button>
    </div>
  );
}

Valeurs de retour du hook

Propriete	Type	Description
`theme`	`string`	Le theme selectionne (`"light"`, `"dark"` ou `"system"`)
`setTheme`	`(theme: string) => void`	Fonction pour changer le theme
`resolvedTheme`	`string`	Le theme reellement applique (resout `"system"` en `"light"` ou `"dark"`)

Mode sombre avec Tailwind

Le mode sombre de Tailwind est configure avec la strategie class dans tailwind.config.ts :

// tailwind.config.ts
export default {
  darkMode: "class",
  // ...
};

Utilisez le prefixe dark: dans vos composants :

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  Content adapts to theme
</div>

Patterns courants

Rendu conditionnel base sur le theme

const { resolvedTheme } = useTheme();

<img
  src={resolvedTheme === "dark" ? "/logo-white.svg" : "/logo-dark.svg"}
  alt="Logo"
/>

Persistance de la preference de theme

Le ThemeProvider sauvegarde automatiquement la preference de l'utilisateur dans le localStorage et la restaure lors des visites suivantes.

Conseils

Utilisez toujours resolvedTheme au lieu de theme lorsque vous verifiez le mode actif, car theme peut etre "system".
Testez le mode sombre sur chaque page avant la mise en production. Les problemes courants incluent les couleurs codees en dur (par ex. text-gray-900 sans equivalent dark:).
Utilisez des proprietes CSS personnalisees pour les couleurs de marque qui changent entre les themes.

Fini ? Marquez cette page comme terminée.

Theme

On this page