# Cheat sheet des noms de couleur et classes de daisyUI : le tableau essentiel pour changer de thème

La principale raison d’utiliser daisyUI est de **faciliter le changement de thème**. Cet avantage disparaît dès qu’un développeur ou un designer intègre une couleur Tailwind “fixe” 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*.

![Développeur robot et palette de couleurs](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## Noms de Couleurs (Quand les utiliser) {#sec-4d3fa8b26445}

| 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, panneaux à ton soutenu |
| `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) {#sec-5007f90f39f0}

| 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 l’opacité {#sec-c72e6700b4d3}

| 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 l’intensité d’une couleur, ajoutez /nombre (en %) à la classe. 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** :

- [daisyUI Theme : 35 palettes de couleurs pour résoudre vos problèmes de couleur](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)
- [Introduction à la plugin Tailwind CSS daisyUI : Créez rapidement une UI avec des classes](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)