# 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 :
---
## Comprendre le cœur du thème : « ne pas spécifier de couleur directement » {#sec-648a5757ecf6}
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 {#sec-0b5438bac864}
```html
```
### ✅ Exemple correct : utilisation des tokens daisyUI pour s’adapter au thème {#sec-e1146fcf48a6}
```html
```
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 carte
- `text-base-content` : couleur de texte de base
- `btn-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 ? {#sec-7cfab9901bed}
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.
```html
Les informations de paiement sont manquantes.
```
---
## Appliquer un thème : changer l’ambiance en un seul `data-theme` {#sec-4d6308cbf561}
L’application d’un thème est étonnamment simple.
```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 {#sec-e0f142807b1a}
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
Tout est sombre
Cette section est toujours claire
Ce span est rétro
```
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 {#sec-ab5d0648dae0}
Une fois l’installation terminée, l’activation des thèmes se fait dans le bloc `@plugin "daisyui" { ... }` du CSS.
```css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
- `themes` est une liste séparée par des virgules.
- `--default` désigne le thème par défaut.
- `--prefersdark` active 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 :
```css
@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 {#sec-612655295e82}
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é ? {#sec-67726d664b47}
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 {#sec-b349bf2c99ab}
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 !