# 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*.

![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, 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) {#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 la 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 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** :

- [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/)