('

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

\n

daisyUI-Themen sind nicht nur „Dark‑Mode‑Support“. \n35 vorgefertigte Paletten (Themen), die bereits produktiv kombinierte Farbwerte enthalten, werden bereitgestellt und können einheitlich im gesamten App‑Bereich angewendet werden.

\n

Bunte Styling‑Boutique‑Bild

\n
\n

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

\n
\n
\n

Kernidee: „Farben nicht direkt festlegen“

\n

Der häufigste Fehler von Anfängern liegt hier.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Falsche MethodeErgebnis
Tailwind‑Klassen wie bg-white, text-slate-900, bg-blue-600 direkt verwendenDas Element behält die feste Farbe, auch wenn das Thema geändert wird.
\n

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

\n

❌ Falsches Beispiel: Hard‑Coding ignoriert das Thema

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

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

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

Wichtig ist hier nicht „Welche Farbe“, sondern „Welche Rolle“.

\n
    \n
  • bg-base-100 : Grundhintergrund des Bildschirms/Karten
    • \n
  • text-base-content : Standardtextfarbe
    • \n
  • btn-primary : Hauptaktion (CTA)
    • \n
\n

Das Thema ersetzt die Farben entsprechend diesen Rollen.

\n
\n

Was also unbedingt verwendet werden muss?

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AnsatzBeispiel
daisyUI‑Komponenten‑Klassenbtn, 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)
\n

Beispiel für einen Warn‑Banner:

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

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

\n

Die Anwendung eines Themas ist überraschend einfach.

\n
<html data-theme="cupcake">\n  <body>\n    <div class="bg-base-100 text-base-content min-h-screen p-10">\n      <button class="btn btn-primary">Primary</button>\n    </div>\n  </body>\n</html>\n
\n

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

\n
\n

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

\n

In der Praxis tauchen häufig folgende Anforderungen auf.

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

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

\n
<html data-theme="dark">\n  <body>\n    <main class="p-10">\n      <h1 class="text-2xl font-bold">Alles ist dunkel</h1>\n\n      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">\n        Dieser Abschnitt bleibt immer hell\n        <span data-theme="retro" class="ml-2">Dieser Span ist retro</span>\n      </section>\n    </main>\n  </body>\n</html>\n
\n

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

\n
\n

Thema‑Management: Nur benötigte Themen aktivieren

\n

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

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

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

\n
@plugin "daisyui" {\n  themes: all;\n}\n
\n

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

\n
\n

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

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PhaseEinsatzweise
MVP‑PhaseMehrere Themen als „Marken‑Kandidaten“ bereitstellen und schnell prüfen, welche mit UI/Content harmoniert
BetriebsphaseDa Farben nicht hartkodiert sind, kann ein Brand‑Renewal oder Saison‑Event einfach durch einen Theme‑Wechsel umgesetzt werden
Team‑ZusammenarbeitOhne Designer bleibt Konsistenz, solange die „rollenspezifischen Tokens“ eingehalten werden
\n

Kurz gesagt:

\n
\n

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

\n
\n
\n

Wann sind Custom‑Themes nötig?

\n

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.

\n

Custom‑Themes werden in Betracht gezogen, wenn:

\n
    \n
  • 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.
    • \n
\n

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.

\n

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

\n
\n

Vorschau des nächsten Beitrags

\n

Im nächsten Artikel plane ich folgende Themen:

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

Bis bald!

', '/media/editor_temp/6/80ae2ebd-04c4-4f84-b0d2-15666a888080.png')