Cheat Sheet des Noms de Couleurs et Classes daisyUI : Le Tableau Essentiel pour le Changement de Thème
La principale raison d’utiliser daisyUI est de faciliter le changement de thème. Cette force s’effondre dès qu’un développeur ou designer insère directement une couleur fixe de Tailwind comme bg-blue-500. En revanche, en utilisant les noms de couleurs basés sur le sens fournis par daisyUI – primary, base-100, error – et en les combinant avec des classes telles que btn-primary, bg-base-200, text-error, l’ensemble de l’UI s’ajuste automatiquement lorsqu’on change simplement le thème.
Ainsi, l’essentiel est de connaître les noms de couleurs et les motifs de classes, puis de les combiner dans le markup. Un designer expérimenté les mémorise instinctivement, mais pour un débutant ou un développeur backend/full‑stack qui touche occasionnellement à l’UI, il est plus rapide de garder cette cheat sheet à portée de main plutôt que de fouiller la documentation à chaque fois. Cet article a pour but de présenter, sous forme de tableau, quand utiliser quel nom de couleur et comment l’associer à une classe.
Noms de Couleurs (Quand les utiliser)
| Nom de couleur | Quand l’utiliser (court) | Exemple d’utilisation |
|---|---|---|
primary |
Couleur principale du thème | Bouton principal, CTA clé |
primary-content |
Texte/icône sur primary |
Couleur du texte du bouton principal |
secondary |
Action secondaire / sous‑marque | Bouton secondaire, accentuation secondaire |
secondary-content |
Texte/icône sur secondary |
Couleur du texte dans la zone secondaire |
accent |
Point de focus / mise en évidence | Badge, lien accentué, élément de mise en avant |
accent-content |
Texte/icône sur accent |
Couleur du texte sur fond accent |
neutral |
UI neutre (ton sombre) | Navigation, pied de page, panneau à ton profond |
neutral-content |
Texte/icône sur neutral |
Couleur du texte dans la zone neutre |
base-100 |
Fond de page de base | Fond de page / canevas |
base-200 |
Surface légèrement surélevée | Carte, fond de section |
base-300 |
Séparation / couche plus forte | Ligne de séparation, panneau profond |
base-content |
Texte/icône sur la série base |
Texte principal |
info |
Information / guide | Bannière d’information, indice |
info-content |
Texte/icône sur info |
Couleur du texte sur fond d’information |
success |
Succès / état normal | Notification de réussite |
success-content |
Texte/icône sur success |
Couleur du texte sur fond de succès |
warning |
Attention / avertissement | Message d’avertissement, confirmation requise |
warning-content |
Texte/icône sur warning |
Couleur du texte sur fond d’avertissement |
error |
Erreur / danger | Échec, erreur, action destructrice |
error-content |
Texte/icône sur error |
Couleur du texte sur fond d’erreur |
Motifs de Classes (Règles d’association des noms de couleur)
| Objectif | Motif | Exemple |
|---|---|---|
| Couleur de fond | bg-{COLOR} |
bg-primary, bg-base-200 |
| Couleur du texte | text-{COLOR} |
text-base-content, text-error |
| Bordure | border-{COLOR} |
border-neutral, border-base-300 |
| Début/milieu/fin de dégradé | from- / via- / to-{COLOR} |
from-primary via-accent to-secondary |
| Anneau (focus) | ring-{COLOR} |
ring-primary |
| Décalage d’anneau | ring-offset-{COLOR} |
ring-offset-base-100 |
| Remplissage SVG | fill-{COLOR} |
fill-accent |
| Trait SVG | stroke-{COLOR} |
stroke-neutral-content |
| Ombre | shadow-{COLOR} |
shadow-primary |
| Contour | outline-{COLOR} |
outline-info |
| Séparation (divide) | divide-{COLOR} |
divide-base-300 |
| Accent de formulaire | accent-{COLOR} |
accent-primary |
| Curseur | caret-{COLOR} |
caret-primary |
| Soulignement/ornement | decoration-{COLOR} |
decoration-accent |
| Placeholder | placeholder-{COLOR} |
placeholder-base-content |
Ajuster la Opacité
| Objectif | Motif | Exemple |
|---|---|---|
| Fond léger | bg-{COLOR}/10 |
bg-primary/10, bg-success/15 |
| Bordure subtile | border-{COLOR}/30 |
border-error/30 |
| Texte faible | text-{COLOR}/70 |
text-base-content/70 |
| Intensité au survol | hover:bg-{COLOR}/80 |
hover:bg-primary/80 |
Pour ajuster la saturation d’une couleur, ajoutez
/nombre(%)à la classe + nom de couleur. Vous pouvez surcharger les noms de couleur, mais ajouter de nouvelles couleurs non‑définies dans la palette compromet la cohérence visuelle et peut provoquer des incohérences lors du changement de thème.
Articles connexes :