# daisyUI-thema: 35 thema’s om ‘kleurproblemen’ te verhelpen
daisyUI’s thema’s gaan verder dan alleen “donkere modus ondersteunen”.
**35 vooraf ontworpen kleurenpaletten (thema’s)**, die een productniveau kleurcombinatie bieden, kunnen overal in de app consistent worden toegepast.
> Deze gids gaat ervan uit dat de installatie al voltooid is.
> Als je nog moet installeren, bekijk dan eerst de officiële handleiding:
>
---
## Kernbegrip van thema’s: “Kleur niet rechtstreeks specificeren” {#sec-648a5757ecf6}
Dit is het meest verwarrende punt voor beginners.
| Foute methode | Resultaat |
|------------|------|
| Direct kleuren gebruiken met Tailwind, zoals `bg-white`, `text-slate-900`, `bg-blue-600` | De kleur blijft vast, ook als het thema verandert. |
Om een thema te gebruiken, **harde codeer geen kleuren**; gebruik in plaats daarvan de **tokens (kleurnamen op basis van betekenis)** die daisyUI levert.
### ❌ Fout voorbeeld: hardcoded kleuren die het thema negeren {#sec-0b5438bac864}
```html
```
### ✅ Correct voorbeeld: gebruik van daisyUI tokens die zich aanpassen aan het thema {#sec-e1146fcf48a6}
```html
```
Het belangrijkste is niet *wat* kleur, maar *welke rol* het speelt.
- `bg-base-100` : basis achtergrond van scherm/kaart
- `text-base-content` : basis tekstkleur
- `btn-primary` : primaire actie (CTA)
Het thema past kleuren aan op basis van deze rollen.
---
## Wat moet je dus *altijd* gebruiken? {#sec-7cfab9901bed}
Om daisyUI-thema’s correct te gebruiken, kun je één van de volgende (of beide) methoden als gewoonte hanteren.
| Gebruik | Voorbeeld |
|--------|------|
| **daisyUI componentklassen** | `btn`, `btn-primary`, `alert`, `badge`, `card`, `navbar`, `input` … |
| **daisyUI kleurtokenklassen (op basis van betekenis)** | Basis achtergrond/tekst: `bg-base-100`, `bg-base-200`, `bg-base-300`, `text-base-content` Accentkleur: `bg-primary`, `text-primary`, `bg-secondary`, `bg-accent`, `bg-neutral` Statuskleur: `bg-info`, `bg-success`, `bg-warning`, `bg-error` (+ bijbehorende `*-content`) |
Bijvoorbeeld, een “waarschuwingsbanner” maakt geen kleur hardcoded, maar gebruikt een rol.
```html
Betalingsinformatie ontbreekt.
```
---
## Thema toepassen: één `data-theme` voor de hele app {#sec-4d6308cbf561}
Thema toepassen is verrassend eenvoudig.
```html
```
Deze ene regel (`data-theme`) verandert de volledige set kleurvariabelen van de app.
---
## Thema is niet alleen “voor de hele app”: sectie‑gewijs toepasbaar {#sec-e0f142807b1a}
In productontwikkeling komen vaak de volgende wensen voor.
- “De hoofdpagina is netjes, maar de evenementbanner moet opvallender”
- “Admin‑pagina is donker, gebruikerspagina licht”
daisyUI laat je een `data-theme` op een specifiek DOM-element plaatsen, waardoor **alleen die sectie** het thema verandert. Er is geen beperking op geneste thema’s.
```html
Alles is donker
Deze sectie is altijd licht
Deze span is retro
```
Deze functionaliteit wordt in de praktijk vaak vaker gebruikt dan een “thema‑toggle”.
---
## Thema beheer: alleen de benodigde thema’s inschakelen {#sec-ab5d0648dae0}
Na installatie beheer je de thema’s via het `@plugin "daisyui" { ... }` blok in je CSS.
```css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
- `themes` is een komma‑gescheiden lijst.
- `--default` is het standaardthema.
- `--prefersdark` is het standaardthema wanneer het besturingssysteem donkere modus prefereert (`prefers-color-scheme: dark`).
Als je eerst alles wilt inschakelen, kun je ook:
```css
@plugin "daisyui" {
themes: all;
}
```
In een product is het echter meestal handiger om **slechts de noodzakelijke thema’s** in te schakelen.
---
## Unieke waarde: ‘thema‑selectie’ als productstrategie, niet alleen design {#sec-612655295e82}
Het is een gemiste kans om de 35 thema’s alleen als “mooie skins” te zien. Ik gebruik ze als volgt.
| Fase | Gebruik |
|------|-----------|
| **MVP‑fase** | Meerdere thema’s als “merk‑kandidaten” tonen en snel testen op UI/inhoud |
| **Operationele fase** | Omdat kleuren niet hardcoded zijn, kan een merk‑update of seizoens‑event simpelweg door een thema‑wissel worden afgehandeld |
| **Team‑samenwerking** | Zonder designer blijft consistentie behouden door alleen de rol‑gebaseerde tokens te gebruiken |
Kortom, één ding is cruciaal.
> **Door het gewoonte van “kleur hardcoderen” te stoppen, wordt het thema een krachtig instrument om de hele app in één keer te upgraden.**
---
## Wanneer heb je een aangepast thema nodig? {#sec-67726d664b47}
Kortom: **meestal volstaan de 35 standaardthema’s**. Ze zijn al zeer verfijnd, dus een “kies een standaardthema + een klein beetje aanpassen” is vaak genoeg.
Desondanks zijn er situaties waarin je een custom (override) overweegt.
- **Duidelijke merk‑kleur**: Als je merk of dienst een vaste kleur heeft, kun je een van de 35 thema’s kiezen en vervolgens de `primary`, `secondary` kleuren aanpassen om die merk‑kleur te integreren.
In dat geval is het efficiënter om **slechts `primary` en `secondary` te tweaken** dan een volledig nieuw thema te maken. De kerninteracties (knoppen, links, CTA) worden in de merk‑kleur weergegeven, terwijl de rest van de toon (achtergrond, tekst, status) de balans van het standaardthema behoudt.
Hoe je `primary` en `secondary` daadwerkelijk aanpast (het overschrijven van een standaardthema) bespreek ik in een volgende post, inclusief code.
---
## Vooruitblik op de volgende aflevering {#sec-b349bf2c99ab}
In het volgende artikel behandel ik:
- “Thema behouden en alleen componenten licht aanpassen” als praktijkpatroon
- Manieren om een thema te customizen
- Een cheat‑sheet van kleurvariabelen en klassen die daisyUI ondersteunt
Tot de volgende keer!