Bascule de thème

مبدل السمةTheme toggle

Stablesrc/dsm/components/theme.tsx

Le sélecteur de thème permet de choisir un affichage clair, sombre ou aligné sur les préférences système. Le choix est mémorisé et appliqué avant l'affichage de la page, pour éviter tout scintillement au chargement.

Import

import { ThemeToggle } from "@/dsm/components/theme";

Exemples

Par défaut

Menu clair / sombre / système, prêt à être placé dans un en-tête.

LTR

Usage

Quand l'utiliser

Proposez toujours les trois options (clair, sombre, système) plutôt qu'une simple bascule binaire.
Placez le sélecteur de thème dans l'en-tête, à côté du sélecteur de langue.

Quand ne pas l'utiliser

N'ajoutez pas ce composant sur une page qui n'est pas enveloppée par `ThemeProvider` (déjà posé dans le layout racine) : le contexte par défaut resterait figé sur le thème clair.
Ne dupliquez pas plusieurs sélecteurs de thème sur une même page : son état est global, un seul suffit.

Accessibilité & langues

Accessibilité

Le déclencheur porte un `aria-label` (« Affichage ») car il n'affiche qu'une icône représentant le thème résolu.
L'option active est cochée (`Check`) dans le menu, en plus d'être portée par son libellé.

RTL & multilingue

Le menu s'aligne en fin de ligne (`align="end"`), comme les autres menus de l'en-tête, et s'inverse automatiquement en RTL.

Propriétés

ThemeToggle

Propriété	Type	Défaut	Description
className	string	—	Classes Tailwind supplémentaires appliquées au déclencheur.

ThemeProvider

Propriété	Type	Défaut	Description
children*	ReactNode	—	Arbre de l'application ; fournit le contexte de thème (clair/sombre/système) à tous les descendants. Déjà posé dans le layout racine.