daisyUI Kleurnamen & Class Cheatsheet: Essentiële Tabel voor Themawisselingen
Het grootste voordeel van het gebruik van daisyUI is het gemak van themawisselingen. Deze kracht verdwijnt echter zodra een ontwikkelaar of ontwerper een vaste kleur zoals bg-blue-500 rechtstreeks in de HTML plaatst. In plaats daarvan kun je de betekenis‑gebaseerde kleurnamen van daisyUI gebruiken, zoals primary, base-100 of error, en componenten schrijven als btn-primary, bg-base-200 of text-error. Wanneer je later het thema wijzigt, volgt de hele UI automatisch de nieuwe tinten.
Daarom draait alles om kleurnamen en class‑patronen kennen en combineren. Voor ervaren ontwerpers is dit intuïtief, maar voor beginners of backend/full‑stack ontwikkelaars die af en toe UI maken, is het veel sneller om deze cheatsheet naast je te hebben in plaats van telkens de documentatie te raadplegen. In dit artikel vind je een overzicht van wanneer welke kleurnaam te gebruiken en hoe je deze combineert met de juiste classes.
Kleurnamen (Wanneer gebruiken)
| Kleurnaam | Wanneer gebruiken? (kort) | Voorbeeldgebruik |
|---|---|---|
primary |
Hoofdtint van het merk | Belangrijkste knoppen, CTA |
primary-content |
Tekst/icoon boven primary |
Tekstkleur op een primary knop |
secondary |
Bijzondere actie / submerk | Subknoppen, extra nadruk |
secondary-content |
Tekst/icoon boven secondary |
Tekstkleur in een secondary gebied |
accent |
Accent / highlight | Badge, linkaccent, opvallend element |
accent-content |
Tekst/icoon boven accent |
Tekstkleur op een accent achtergrond |
neutral |
Neutrale UI (donker) | Navigatie, footer, diepe panelen |
neutral-content |
Tekst/icoon boven neutral |
Tekstkleur in een neutral gebied |
base-100 |
Basis pagina achtergrond | Pagina/ canvas achtergrond |
base-200 |
Een niveau hoger | Kaarten, sectie achtergrond |
base-300 |
Sterkere scheiding / laag | Scheidingslijn, diepe panelen |
base-content |
Tekst/icoon boven base |
Standaard tekst |
info |
Informatie / gids | Informatie banner, hint |
info-content |
Tekst/icoon boven info |
Tekstkleur op een info achtergrond |
success |
Succes / goed | Voltooiing / succes melding |
success-content |
Tekst/icoon boven success |
Tekstkleur op een success achtergrond |
warning |
Waarschuwing / alert | Waarschuwing bericht, bevestiging nodig |
warning-content |
Tekst/icoon boven warning |
Tekstkleur op een warning achtergrond |
error |
Fout / gevaar | Foutmelding, destructieve actie |
error-content |
Tekst/icoon boven error |
Tekstkleur op een error achtergrond |
Class‑patronen (Kleurnaam combineren)
| Doel | Patroon | Voorbeeld |
|---|---|---|
| Achtergrond | bg-{KLEUR} |
bg-primary, bg-base-200 |
| Tekstkleur | text-{KLEUR} |
text-base-content, text-error |
| Rand | border-{KLEUR} |
border-neutral, border-base-300 |
| Gradient start / midden / eind | from- / via- / to-{KLEUR} |
from-primary via-accent to-secondary |
| Ring (focus) | ring-{KLEUR} |
ring-primary |
| Ring offset | ring-offset-{KLEUR} |
ring-offset-base-100 |
| SVG vulling | fill-{KLEUR} |
fill-accent |
| SVG lijn | stroke-{KLEUR} |
stroke-neutral-content |
| Schaduw | shadow-{KLEUR} |
shadow-primary |
| Omtrek | outline-{KLEUR} |
outline-info |
| Scheiding (divide) | divide-{KLEUR} |
divide-base-300 |
| Form accent | accent-{KLEUR} |
accent-primary |
| Caret | caret-{KLEUR} |
caret-primary |
| Onderstreping / decoratie | decoration-{KLEUR} |
decoration-accent |
| Placeholder | placeholder-{KLEUR} |
placeholder-base-content |
Opaciteit voor intensiteit
| Doel | Patroon | Voorbeeld |
|---|---|---|
| Licht achtergrond | bg-{KLEUR}/10 |
bg-primary/10, bg-success/15 |
| Subtiele rand | border-{KLEUR}/30 |
border-error/30 |
| Zwak tekst | text-{KLEUR}/70 |
text-base-content/70 |
| Hover intensiteit | hover:bg-{KLEUR}/80 |
hover:bg-primary/80 |
Wil je de intensiteit van een kleur aanpassen, gebruik dan
class + kleurmet een/getal(%). Het overschrijven van kleurnamen is toegestaan, maar het toevoegen van extra kleuren buiten de daisyUI‑set kan de uniformiteit schaden en onverwachte tinten opleveren bij thema‑wisselingen.
Gerelateerde artikelen :