daisyUI-Thema: 35 Paletten, um Farbprobleme zu lösen

daisyUI-Themen sind nicht nur „Dark‑Mode‑Support“. daisyUI bietet 35 vorgefertigte Paletten (Themes) mit produktreifen Farbkombinationen, die Sie einheitlich in der gesamten App anwenden können.

Bunte Styling‑Boutique‑Bild

Dieser Artikel geht davon aus, dass die Installation abgeschlossen ist. Falls Sie noch installieren müssen, lesen Sie bitte die offizielle Anleitung: https://daisyui.com/docs/install/

Kernidee: „Farben nicht direkt festlegen“

Commandbox 광고

Hier liegt der häufigste Stolperstein für Anfänger.

Falsche Methode Ergebnis
Tailwind‑Klassen wie bg-white, text-slate-900, bg-blue-600 direkt verwenden Das Element behält die feste Farbe, auch wenn das Thema geändert wird.

Um das Thema zu nutzen, vermeiden Sie Hard‑Coding und verwenden stattdessen die von daisyUI bereitgestellten Token (semantische Farb‑Bezeichnungen).

❌ Falsches Beispiel: Hard‑Coding ignoriert das Thema

<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>

✅ Richtiges Beispiel: daisyUI‑Token nutzen, um dem Thema zu folgen

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

Entscheidend ist nicht „Welche Farbe“, sondern „Welche Rolle“.

  • bg-base-100 : Standard-Hintergrund für Screens/Karten
  • text-base-content : Standardtextfarbe
  • btn-primary : Hauptaktion (CTA)

Das Thema ersetzt die Farben entsprechend diesen Rollen.

Was also unbedingt verwendet werden muss?

Um daisyUI-Themen korrekt zu nutzen, sollten Sie entweder oder beide der folgenden Ansätze regelmäßig anwenden.

Ansatz Beispiel
daisyUI‑Komponenten‑Klassen btn, btn-primary, alert, badge, card, navbar, input …
daisyUI‑Farb‑Token‑Klassen (semantische Farben) Grundfarben: bg-base-100, bg-base-200, bg-base-300, text-base-content
Akzentfarben: bg-primary, text-primary, bg-secondary, bg-accent, bg-neutral
Statusfarben: bg-info, bg-success, bg-warning, bg-error (+ jeweilige *-content)

Beispiel für einen Warn‑Banner: 

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

Thema anwenden: Mit data-theme die gesamte Stimmung ändern

Commandbox 광고

Die Anwendung eines Themas ist überraschend einfach.

<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>

Eine einzige Zeile (data-theme) ändert die Farb‑Variablensammlung für die gesamte App.

Themen ändern ist nicht nur „global“: Abschnittsweise möglich

In der Praxis tauchen häufig folgende Anforderungen auf.

  • „Die Hauptseite ist sauber, aber der Event‑Banner soll auffälliger sein“
  • „Admin‑Bereich dunkel, Benutzer‑Bereich hell“

daisyUI lässt Sie data-theme nur an ein bestimmtes DOM‑Element anhängen, sodass nur dieser Bereich das Thema ändert. Verschachtelungen sind unbegrenzt.

<html data-theme="dark">
  <body>
    <main class="p-10">
      <h1 class="text-2xl font-bold">Alles ist dunkel</h1>

      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">
        Dieser Abschnitt bleibt immer hell
        <span data-theme="retro" class="ml-2">Dieser Span ist retro</span>
      </section>
    </main>
  </body>
</html>

Diese Funktion wird in der Praxis oft häufiger genutzt als ein globaler Theme‑Toggle.

Thema‑Management: Nur benötigte Themen aktivieren

Nach der Installation verwalten Sie die aktiven Themen im CSS‑Block @plugin "daisyui" { ... }.

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
  • themes ist eine durch Kommas getrennte Liste.
  • --default bezeichnet das Standard‑Theme.
  • --prefersdark wählt das Standard‑Theme, wenn das Betriebssystem Dark‑Mode bevorzugt (prefers-color-scheme: dark).

Wenn Sie zunächst alles aktivieren wollen, können Sie auch:

@plugin "daisyui" {
  themes: all;
}

In der Regel ist es jedoch einfacher, nur die benötigten Themen zu aktivieren.

Differenzierungs‑Punkt: „Thema auswählen“ als Produktstrategie, nicht nur Design

Die 35 Themen sind mehr als nur hübsche Skins. Ich nutze sie so:

Phase Einsatzweise
MVP‑Phase Mehrere Themen als „Marken‑Kandidaten“ bereitstellen und schnell prüfen, welche mit UI/Content harmoniert
Betriebsphase Da Farben nicht hartkodiert sind, kann ein Brand‑Renewal oder Saison‑Event einfach durch einen Theme‑Wechsel umgesetzt werden
Team‑Zusammenarbeit Ohne Designer bleibt Konsistenz, solange die „rollenspezifischen Tokens“ eingehalten werden

Kurz gesagt:

Wenn Sie die Gewohnheit des direkten Farb‑Hard‑Codings aufgeben, wird das Thema zum Werkzeug, um Ihre gesamte App sofort aufzuwerten.

Wann sind Custom‑Themes nötig?

Kurz gesagt: Für die meisten Fälle reichen die 35 Standard‑Themes aus. Sie sind bereits sehr ausgereift, sodass Sie meist nur ein Thema wählen und geringfügig anpassen.

Custom‑Themes werden in Betracht gezogen, wenn:

  • Klare Markenfarben vorliegen: Wenn die Hauptfarbe Ihres Unternehmens/Services bereits feststeht und Sie ein Standard‑Theme auswählen, das Sie dann mit Ihrer Markenfarbe überschreiben möchten.

In solchen Fällen ist es effizienter, nur primary, secondary usw. leicht zu überschreiben als ein komplett neues Theme zu erstellen. So bleiben die restlichen Töne (Hintergrund, Text, Statusfarben) im Gleichgewicht des Standard‑Themes.

Wie Sie primary und secondary konkret anpassen (Überschreiben des Standard‑Themes) erkläre ich in einem nächsten Beitrag mit Code‑Beispielen.

Vorschau des nächsten Beitrags

Im nächsten Artikel plane ich folgende Themen:

  • Praktische Muster, bei denen das Thema erhalten bleibt, aber Komponenten leicht verändert werden
  • Vorgehensweise zur Theme‑Anpassung
  • Cheat‑Sheet zu den Farb‑Variablen und Klassen, die daisyUI unterstützt

Bis bald!