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.

Stijlboetiek met kleurrijke styling

Deze gids gaat ervan uit dat de installatie al voltooid is. Als je nog moet installeren, bekijk dan eerst de officiële handleiding: https://daisyui.com/docs/install/

Kernbegrip van thema’s: “Kleur niet rechtstreeks specificeren”

Commandbox 광고

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, hardcode geen kleuren; gebruik in plaats daarvan de tokens (kleurnamen op basis van betekenis) die daisyUI levert.

❌ Fout voorbeeld: hardcoded kleuren die het thema negeren

<div class="bg-white text-slate-900 p-6 rounded-2xl">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>
</div>

✅ Correct voorbeeld: gebruik van daisyUI tokens die zich aanpassen aan het thema

<div class="bg-base-100 text-base-content p-6 rounded-box">
  <button class="btn btn-primary">Save</button>
</div>

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?

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.

<div class="bg-warning text-warning-content p-4 rounded-box">
  Betalingsinformatie ontbreekt.
</div>

Thema toepassen: één data-theme voor de hele app

Commandbox 광고

Thema toepassen is verrassend eenvoudig.

<html data-theme="cupcake">
  <body>
    <div class="bg-base-100 text-base-content min-h-screen p-10">
      <button class="btn btn-primary">Primary</button>
    </div>
  </body>
</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

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 data-theme="dark">
  <body>
    <main class="p-10">
      <h1 class="text-2xl font-bold">Alles is donker</h1>

      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">
        Deze sectie is altijd licht
        <span data-theme="retro" class="ml-2">Deze span is retro</span>
      </section>
    </main>
  </body>
</html>

Deze functionaliteit wordt in de praktijk vaak vaker gebruikt dan een “thema‑toggle”.

Thema beheer: alleen de benodigde thema’s inschakelen

Na installatie beheer je de thema’s via het @plugin "daisyui" { ... } blok in je 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:

@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

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 de gewoonte om kleuren te hardcoden los te laten, wordt het thema een krachtig instrument om de hele app in één keer te upgraden.

Wanneer heb je een aangepast thema nodig?

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

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!