Dark Mode (dark:)

Définition

Préfixe dark: qui applique des styles quand le mode sombre est actif. Par défaut il suit prefers-color-scheme. Pour un basculement manuel, la v4 redéfinit la variante avec @custom-variant dark, sur une classe ou un attribut data-theme.

Analogie

Un interrupteur jour/nuit dans ta maison : les meubles restent, seul l'éclairage change.

Exemple de code

@import "tailwindcss";
/* basculement par classe .dark */
@custom-variant dark (&:where(.dark, .dark *));

/* ou par attribut */
/* @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); */

/* HTML : <html class="dark"> ... <div class="bg-white dark:bg-black"> */

Cas d'usage

Implémenter un theme sombre sans dupliquer les composants ni gérer des variables CSS manuellement.

Termes liés

Sources

• tailwindcss.com/docs/dark-mode