daisyUI\u202f: 35 thèmes pour mettre fin aux doutes de couleur
\ndaisyUI 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.
\n
\n\nCet article suppose que l’installation est terminée. Si vous devez commencer par l’installation, consultez le guide officiel : https://daisyui.com/docs/install/
\n
\n
Comprendre le cœur du thème : «\u202fne pas spécifier de couleur directement\u202f»
\nLe point le plus déroutant pour les débutants est exactement celui-ci.
\n| Méthode incorrecte | \nRésultat | \n
|---|---|
Utiliser Tailwind avec bg-white, text-slate-900, bg-blue-600 | \nL’élément conserve la couleur fixe même si le thème change | \n
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.
\n❌ Exemple incorrect : hardcoding qui ignore le thème
\n<div class="bg-white text-slate-900 p-6 rounded-2xl">\n <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>\n</div>\n✅ Exemple correct : utilisation des tokens daisyUI pour s’adapter au thème
\n<div class="bg-base-100 text-base-content p-6 rounded-box">\n <button class="btn btn-primary">Save</button>\n</div>\nL’essentiel n’est pas la couleur elle‑même, mais son rôle.
\n- \n
bg-base-100: fond de base de l’écran ou de la carte \ntext-base-content: couleur de texte de base \nbtn-primary: action principale (CTA) du produit \n
Le thème remplace les couleurs en fonction de ces rôles.
\n\n
Alors, qu’est‑ce qu’il faut absolument utiliser\u202f?
\nPour bien exploiter daisyUI, il suffit d’adopter l’une (ou les deux) des pratiques suivantes.
\n| Pratique | \nExemple | \n
|---|---|
| Classes de composants daisyUI | \nbtn, btn-primary, alert, badge, card, navbar, input, … | \n
| Classes de tokens de couleur daisyUI (basées sur le sens) | \nFond/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) | \n
Par exemple, pour une bannière d’avertissement, on ne fixe pas la couleur mais on exprime le rôle.
\n<div class="bg-warning text-warning-content p-4 rounded-box">\n Les informations de paiement sont manquantes.\n</div>\n\n
Appliquer un thème : changer l’ambiance en un seul data-theme
\nL’application d’un thème est étonnamment simple.
\n<html data-theme="cupcake">\n <body>\n <div class="bg-base-100 text-base-content min-h-screen p-10">\n <button class="btn btn-primary">Primary</button>\n </div>\n </body>\n</html>\nCette seule ligne (data-theme) modifie l’ensemble des variables de couleur de l’application.
\n
Le thème ne change pas seulement l’ensemble : il fonctionne aussi par section
\nDans le développement de produits, on rencontre souvent ces besoins.
\n- \n
- «\u202fLa page principale est propre, mais la bannière d’événement doit être plus accrocheuse\u202f» \n
- «\u202fLa page d’administration est sombre, la page utilisateur est claire\u202f» \n
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">\n <body>\n <main class="p-10">\n <h1 class="text-2xl font-bold">Tout est sombre</h1>\n\n <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">\n Cette section est toujours claire\n <span data-theme="retro" class="ml-2">Ce span est rétro</span>\n </section>\n </main>\n </body>\n</html>\nCette fonctionnalité est souvent plus utilisée que le simple «\u202ftoggle de thème\u202f».
\n\n
Gestion des thèmes : n’activer que ce qui est nécessaire
\nUne fois l’installation terminée, l’activation des thèmes se fait dans le bloc @plugin "daisyui" { ... } du CSS.
@import "tailwindcss";\n\n@plugin "daisyui" {\n themes: light --default, dark --prefersdark, cupcake;\n}\n- \n
themesest une liste séparée par des virgules. \n--defaultdésigne le thème par défaut. \n--prefersdarkactive le thème par défaut lorsque le système est en mode sombre (prefers-color-scheme: dark). \n
Si vous voulez tout activer, vous pouvez faire\u202f:
\n@plugin "daisyui" {\n themes: all;\n}\nEn pratique, il est plus simple de n’activer que les thèmes réellement utilisés.
\n\n
Un point différenciateur : considérer le «\u202fchoix du thème\u202f» comme une stratégie produit, pas seulement un design
\nIl est dommage de voir les 35 thèmes comme de simples skins. Voici comment je les utilise.
\n| Étape | \nUtilisation | \n
|---|---|
| Phase MVP | \nLancer plusieurs thèmes comme «\u202fcandidats de marque\u202f» pour tester rapidement l’harmonie avec le UI/ contenu | \n
| Phase opérationnelle | \nÉ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 | \n
| Collaboration d’équipe | \nMême sans designer, le respect des tokens basés sur le rôle garantit la cohérence | \n
En fin de compte, l’idée est simple.
\n\n\nEn abandonnant l’habitude de coder les couleurs, le thème devient un outil qui met à jour l’ensemble de l’application en un instant.
\n
\n
Quand faut‑on créer un thème personnalisé\u202f?
\nEn 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.
\nCependant, on envisage un thème personnalisé dans les cas suivants.
\n- \n
- 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. \n
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.
\n
Teaser du prochain article
\nLe prochain article couvrira\u202f:
\n- \n
- Le pattern «\u202fmaintenir le thème et modifier légèrement les composants\u202f» \n
- La méthode de personnalisation du thème \n
- Une cheat‑sheet des variables de couleur et des classes prises en charge par daisyUI \n
À bientôt\u202f!
', '/media/editor_temp/6/80ae2ebd-04c4-4f84-b0d2-15666a888080.png')