daisyUI : thèmes et couleurs

Un thème daisyUI est un jeu de variables CSS (couleurs, arrondis, tailles) qui change l’apparence de tous les composants. Les classes (btn-primary, bg-base-100) restent identiques : seules les valeurs changent.

Activer des thèmes

@import 'tailwindcss';
@plugin 'daisyui' {
  themes:
    light --default,
    dark --prefersdark,
    cupcake,
    nord,
    synthwave;
}

Appliquer un thème à toute la page, ou à une partie :

<html lang="fr" data-theme="cupcake">
  <body>
    <div data-theme="dark" class="p-6">Cette zone est en thème sombre.</div>
  </body>
</html>

L’attribut data-theme peut être posé sur n’importe quel élément : les enfants héritent du thème. Voir la liste des thèmes sur daisyui.com/docs/themes/.

Thème clair et sombre automatiques

Avec light --default et dark --prefersdark, daisyUI choisit le thème sombre quand le système le demande (prefers-color-scheme), sans attribut :

@plugin 'daisyui' {
  themes:
    light --default,
    dark --prefersdark;
}

Bouton de bascule clair/sombre

Avec un attribut data-theme sur <html>, choix mémorisé dans le navigateur et préférence du système au premier chargement :

<script is:inline>
  (function () {
    try {
      var enregistre = localStorage.getItem('theme');
      var systeme = matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark'
        : 'light';
      document.documentElement.dataset.theme = enregistre || systeme;
    } catch (e) {}
  })();
</script>

<button
  class="btn btn-ghost btn-circle"
  id="bascule"
  aria-label="Changer de thème"
>
  ◐
</button>

<script>
  document.getElementById('bascule')?.addEventListener('click', () => {
    const racine = document.documentElement;
    const suivant = racine.dataset.theme === 'dark' ? 'light' : 'dark';
    racine.dataset.theme = suivant;
    try {
      localStorage.setItem('theme', suivant);
    } catch {}
  });
</script>

Le premier script, placé dans le <head>, s’exécute avant l’affichage pour éviter un flash de thème (la syntaxe is:inline est celle d’Astro ; sinon, un <script> classique). Déclarer alors les thèmes sans --prefersdark si on gère soi-même le choix :

@plugin 'daisyui' {
  themes:
    light --default,
    dark;
}

Avec le composant theme-controller

daisyUI propose un contrôle sans JavaScript (mais sans mémorisation) :

<label class="swap swap-rotate">
  <input type="checkbox" class="theme-controller" value="dark" />
  <span class="swap-off">☀</span>
  <span class="swap-on">☾</span>
</label>

La case cochée applique le thème donné par value. Pour mémoriser le choix, utiliser le script ci-dessus.

Variables de couleur d’un thème

Variable	Rôle
--color-base-100, --color-base-200, --color-base-300	Fonds de page, surfaces, bordures
--color-base-content	Texte sur les fonds base-*
--color-primary, --color-primary-content	Couleur de marque et texte dessus
--color-secondary, --color-accent, --color-neutral	Autres couleurs de marque
--color-info, --color-success, --color-warning, --color-error	États (avec leur -content)
--radius-selector, --radius-field, --radius-box	Arrondis (cases à cocher et badges, champs et boutons, cartes et modales)
--size-selector, --size-field	Taille de base des éléments
--border	Épaisseur des bordures
--depth, --noise	Relief (0 ou 1) et texture

Chaque couleur X a une couleur de texte associée X-content : choisir les deux pour un contraste suffisant.

Créer un thème personnalisé

@import 'tailwindcss';
@plugin 'daisyui';

@plugin 'daisyui/theme' {
  name: 'marque';
  default: true;
  prefersdark: false;
  color-scheme: light;

  --color-base-100: oklch(98% 0.01 250);
  --color-base-200: oklch(95% 0.01 250);
  --color-base-300: oklch(90% 0.02 250);
  --color-base-content: oklch(25% 0.03 250);

  --color-primary: oklch(55% 0.2 265);
  --color-primary-content: oklch(98% 0.01 265);
  --color-secondary: oklch(65% 0.15 200);
  --color-secondary-content: oklch(20% 0.03 200);
  --color-accent: oklch(70% 0.18 150);
  --color-accent-content: oklch(20% 0.03 150);
  --color-neutral: oklch(30% 0.03 250);
  --color-neutral-content: oklch(95% 0.01 250);

  --color-info: oklch(70% 0.15 230);
  --color-info-content: oklch(20% 0.03 230);
  --color-success: oklch(70% 0.17 150);
  --color-success-content: oklch(20% 0.03 150);
  --color-warning: oklch(80% 0.16 85);
  --color-warning-content: oklch(25% 0.04 85);
  --color-error: oklch(62% 0.22 25);
  --color-error-content: oklch(98% 0.01 25);

  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

Réglage	Sens
name	Nom utilisable dans data-theme="marque"
default: true	Thème par défaut
prefersdark: true	Thème utilisé quand le système préfère le sombre
color-scheme	light ou dark (couleurs des éléments natifs du navigateur)

Le générateur de thème de daisyui.com/theme-generator/ produit ce bloc à partir de choix visuels. Pour un thème sombre, créer un second bloc (name: "marque-sombre", color-scheme: dark, prefersdark: true).

Les couleurs sont données en OKLCH (oklch(luminosité chroma teinte)), mais toute valeur CSS (#4f46e5) fonctionne.

Modifier un thème existant

Redéfinir seulement certaines variables d’un thème fourni :

@plugin 'daisyui/theme' {
  name: 'light';
  default: true;
  --color-primary: oklch(55% 0.2 265);
  --radius-box: 0.5rem;
}

Utiliser les couleurs du thème avec Tailwind

<div
  class="bg-base-200 text-base-content border-base-300 rounded-box border p-6"
>
  <h2 class="text-primary text-xl font-bold">Titre</h2>
  <p class="text-base-content/70">Texte atténué</p>
  <button class="btn btn-primary">Action</button>
</div>

Les couleurs de thème sont aussi des variables CSS : var(--color-primary). L’opacité s’écrit avec / (bg-primary/20).

Vérifier les contrastes

• Texte sur base-100 : au moins 4,5:1 (texte courant).
• Couleur principale et son texte (primary / primary-content) : au moins 4,5:1.
• Tester les deux thèmes (clair et sombre) et les états de focus.

Dépannage

Symptôme	Piste
data-theme="cupcake" sans effet	Thème absent de themes:
Mon thème personnalisé ne s’applique pas	name différent de celui de data-theme, ou default: true absent
Flash de thème clair au chargement	Initialiser le thème par un script dans le <head>
Le thème sombre automatique ne marche plus	Choix mémorisé en localStorage prioritaire, ou --prefersdark absent
Texte illisible sur une couleur	Variable *-content à contraste insuffisant
dark: de Tailwind ne suit pas le thème daisyUI	Définir @custom-variant dark sur l’attribut data-theme (voir Tailwind : responsive et états)

Ubuntu 24.04 et 26.04 : différences à connaître

Aucune.

Pour aller plus loin

• Thèmes, Couleurs, Générateur de thème
• Suite : Intégration avec Astro, React et Next.js

Dans la même rubrique

• Installation
• Composants de base
• Formulaires
• Navigation et fenêtres
• Thèmes et couleurs
• Intégration avec Astro, React et Next.js
• Migration et dépannage