daisyUI kleurnamen & class-cheatsheet: essentiële tabel voor themawisselingen
Het grootste voordeel van daisyUI is dat je thema’s moeiteloos kunt wisselen. Die kracht gaat verloren zodra een ontwikkelaar of ontwerper vaste Tailwind-kleuren zoals bg-blue-500 rechtstreeks in de HTML zet. Gebruik in plaats daarvan de semantische kleurnamen van daisyUI, zoals primary, base-100 en error, en pas ze toe met classes als btn-primary, bg-base-200 en text-error. Dan volgt bij een themawissel automatisch de volledige UI en blijven alle kleuren in balans.
De kern is dus: ken de kleurnamen en class-patronen en combineer ze in je markup. Ervaren designers hebben dit vaak paraat, maar voor beginners of backend-/full-stack-ontwikkelaars die af en toe UI bouwen, is het sneller om dit cheat sheet bij de hand te hebben dan telkens de documentatie door te spitten. In dit artikel staat daarom een overzichtelijke tabel met wanneer je welke kleurnaam gebruikt en hoe je die koppelt aan de juiste class.
Kleurnamen (wanneer gebruiken)
| Kleurnaam | Wanneer gebruiken? (kort) | Voorbeeldgebruik |
|---|---|---|
primary |
Hoofdkleur van het merk | Belangrijkste knoppen, CTA’s |
primary-content |
Tekst/iconen op primary |
Tekst op primary-knoppen |
secondary |
Secundaire actie / submerk | Secundaire knoppen, extra nadruk |
secondary-content |
Tekst/iconen op secondary |
Tekst in secondary-gebieden |
accent |
Accent / highlight | Badges, link-highlights, accenten |
accent-content |
Tekst/iconen op accent |
Tekst op accent-achtergrond |
neutral |
Neutrale UI (donkere toon) | Navigatie, footer, donkere panels |
neutral-content |
Tekst/iconen op neutral |
Tekst in neutral-gebieden |
base-100 |
Standaard paginabackground | Pagina-/canvas-achtergrond |
base-200 |
Licht verhoogd oppervlak | Cards, sectie-achtergronden |
base-300 |
Sterkere scheiding / laag | Dividers, diepere panels |
base-content |
Tekst/iconen op de base-reeks | Standaard bodytekst |
info |
Informatie / begeleiding | Info-banners, hints |
info-content |
Tekst/iconen op info |
Tekst op info-achtergrond |
success |
Succes / positief | Succesmeldingen |
success-content |
Tekst/iconen op success |
Tekst op success-achtergrond |
warning |
Waarschuwing / aandachtspunt | Waarschuwingen, bevestiging nodig |
warning-content |
Tekst/iconen op warning |
Tekst op warning-achtergrond |
error |
Fout / gevaar | Fouten, destructieve acties |
error-content |
Tekst/iconen op error |
Tekst op error-achtergrond |
Class-patronen (kleurnamen combineren)
| Doel | Patroon | Voorbeeld |
|---|---|---|
| Achtergrondkleur | bg-{COLOR} |
bg-primary, bg-base-200 |
| Tekstkleur | text-{COLOR} |
text-base-content, text-error |
| Rand | border-{COLOR} |
border-neutral, border-base-300 |
| Gradient start/midden/eind | from- / via- / to-{COLOR} |
from-primary via-accent to-secondary |
| Ring (focus) | ring-{COLOR} |
ring-primary |
| Ring-offset | ring-offset-{COLOR} |
ring-offset-base-100 |
| SVG-vulling | fill-{COLOR} |
fill-accent |
| SVG-lijn | stroke-{COLOR} |
stroke-neutral-content |
| Schaduw | shadow-{COLOR} |
shadow-primary |
| Omtrek | outline-{COLOR} |
outline-info |
| Scheiding (divide) | divide-{COLOR} |
divide-base-300 |
| Form-accent | accent-{COLOR} |
accent-primary |
| Caret | caret-{COLOR} |
caret-primary |
| Onderstreping/decoratie | decoration-{COLOR} |
decoration-accent |
| Placeholder | placeholder-{COLOR} |
placeholder-base-content |
Opaciteit aanpassen
| Doel | Patroon | Voorbeeld |
|---|---|---|
| Lichte achtergrond | bg-{COLOR}/10 |
bg-primary/10, bg-success/15 |
| Subtiele rand | border-{COLOR}/30 |
border-error/30 |
| Minder opvallende tekst | text-{COLOR}/70 |
text-base-content/70 |
| Hover-intensiteit | hover:bg-{COLOR}/80 |
hover:bg-primary/80 |
Wil je de intensiteit van een kleur aanpassen, voeg dan
/{getal}(percentage) toe aan de class. Kleurnamen overschrijven kan, maar extra (niet-semantische) kleuren rechtstreeks in HTML ondermijnen de consistentie en kunnen bij themawisselingen onverwacht opvallen.
Gerelateerde artikelen: