daisyUI : 35 thèmes pour mettre fin aux doutes de couleur
daisyUI ne se limite pas à une simple prise en charge du mode sombre. Il propose 35 palettes (thèmes) préconçues qui combinent les couleurs à un niveau produit, et permet d’appliquer ces palettes de façon cohérente à l’ensemble de l’application.
Cet article suppose que l’installation est terminée. Si vous devez commencer par l’installation, consultez le guide officiel : https://daisyui.com/docs/install/
Comprendre le cœur du thème : « ne pas spécifier de couleur directement »
Le point le plus déroutant pour les débutants est exactement celui-ci.
| Méthode incorrecte | Résultat |
|---|---|
Utiliser Tailwind avec bg-white, text-slate-900, bg-blue-600 |
L’élément conserve la couleur fixe même si le thème change |
En d’autres termes, pour utiliser un thème, ne pas coder les couleurs en dur ; utilisez les tokens (noms de couleurs basés sur le sens) fournis par daisyUI.
❌ Exemple incorrect : hardcoding qui ignore le thème
<div class="bg-white text-slate-900 p-6 rounded-2xl">
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>
</div>
✅ Exemple correct : utilisation des tokens daisyUI pour s’adapter au thème
<div class="bg-base-100 text-base-content p-6 rounded-box">
<button class="btn btn-primary">Save</button>
</div>
L’essentiel n’est pas la couleur elle‑même, mais son rôle.
bg-base-100: fond de base de l’écran ou de la cartetext-base-content: couleur de texte de basebtn-primary: action principale (CTA) du produit
Le thème remplace les couleurs en fonction de ces rôles.
Alors, qu’est‑ce qu’il faut absolument utiliser ?
Pour bien exploiter daisyUI, il suffit d’adopter l’une (ou les deux) des pratiques suivantes.
| Pratique | Exemple |
|---|---|
| Classes de composants daisyUI | btn, btn-primary, alert, badge, card, navbar, input, … |
| Classes de tokens de couleur daisyUI (basées sur le sens) | Fond/texte de base : bg-base-100, bg-base-200, bg-base-300, text-base-content Couleur de pointage : bg-primary, text-primary, bg-secondary, bg-accent, bg-neutral Couleur d’état : bg-info, bg-success, bg-warning, bg-error (+ leurs *-content correspondants) |
Par exemple, pour une bannière d’avertissement, on ne fixe pas la couleur mais on exprime le rôle.
<div class="bg-warning text-warning-content p-4 rounded-box">
Les informations de paiement sont manquantes.
</div>
Appliquer un thème : changer l’ambiance en un seul data-theme
L’application d’un thème est étonnamment simple.
<html data-theme="cupcake">
<body>
<div class="bg-base-100 text-base-content min-h-screen p-10">
<button class="btn btn-primary">Primary</button>
</div>
</body>
</html>
Cette seule ligne (data-theme) modifie l’ensemble des variables de couleur de l’application.
Le thème ne change pas seulement l’ensemble : il fonctionne aussi par section
Dans le développement de produits, on rencontre souvent ces besoins.
- « La page principale est propre, mais la bannière d’événement doit être plus accrocheuse »
- « La page d’administration est sombre, la page utilisateur est claire »
daisyUI permet d’attacher data-theme à un DOM spécifique, ce qui change le thème uniquement dans cette zone. Les imbriquations sont possibles.
<html data-theme="dark">
<body>
<main class="p-10">
<h1 class="text-2xl font-bold">Tout est sombre</h1>
<section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">
Cette section est toujours claire
<span data-theme="retro" class="ml-2">Ce span est rétro</span>
</section>
</main>
</body>
</html>
Cette fonctionnalité est souvent plus utilisée que le simple « toggle de thème ».
Gestion des thèmes : n’activer que ce qui est nécessaire
Une fois l’installation terminée, l’activation des thèmes se fait dans le bloc @plugin "daisyui" { ... } du CSS.
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
themesest une liste séparée par des virgules.--defaultdésigne le thème par défaut.--prefersdarkactive le thème par défaut lorsque le système est en mode sombre (prefers-color-scheme: dark).
Si vous voulez tout activer, vous pouvez faire :
@plugin "daisyui" {
themes: all;
}
En pratique, il est plus simple de n’activer que les thèmes réellement utilisés.
Un point différenciateur : considérer le « choix du thème » comme une stratégie produit, pas seulement un design
Il est dommage de voir les 35 thèmes comme de simples skins. Voici comment je les utilise.
| Étape | Utilisation |
|---|---|
| Phase MVP | Lancer plusieurs thèmes comme « candidats de marque » pour tester rapidement l’harmonie avec le UI/ contenu |
| Phase opérationnelle | Étant donné qu’il n’y a pas de hardcoding, un renouvellement de marque ou un événement saisonnier se résume à changer de thème |
| Collaboration d’équipe | Même sans designer, le respect des tokens basés sur le rôle garantit la cohérence |
En fin de compte, l’idée est simple.
En abandonnant l’habitude de coder les couleurs, le thème devient un outil qui met à jour l’ensemble de l’application en un instant.
Quand faut‑on créer un thème personnalisé ?
En bref, la plupart du temps, les 35 thèmes de base suffisent. Ils sont déjà très soignés, et on peut les utiliser avec quelques ajustements mineurs.
Cependant, on envisage un thème personnalisé dans les cas suivants.
- Couleur de marque clairement définie : si l’entreprise ou le service a déjà une couleur principale, on peut choisir un thème de base puis surcharger légèrement
primary,secondary, etc. Cela permet de garder l’équilibre global du thème tout en alignant les interactions clés (boutons, liens, CTA) sur la couleur de marque.
La façon exacte de personnaliser primary et secondary (en surchargeant le thème de base) sera détaillée dans le prochain article, avec du code.
Teaser du prochain article
Le prochain article couvrira :
- Le pattern « maintenir le thème et modifier légèrement les composants »
- La méthode de personnalisation du thème
- Une cheat‑sheet des variables de couleur et des classes prises en charge par daisyUI
À bientôt !
Aucun commentaire.