# daisyUI-Thema: 35 Paletten, um Farbprobleme zu lösen
daisyUI-Themen sind nicht nur „Dark‑Mode‑Support“.
**35 vorgefertigte Paletten (Themen)**, die bereits produktiv kombinierte Farbwerte enthalten, werden bereitgestellt und können **einheitlich im gesamten App‑Bereich** angewendet werden.
> Dieser Artikel geht davon aus, dass die Installation abgeschlossen ist.
> Falls Sie noch installieren müssen, lesen Sie bitte die offizielle Anleitung:
>
---
## Kernidee: „Farben nicht direkt festlegen“ {#sec-648a5757ecf6}
Der häufigste Fehler von Anfängern liegt hier.
| 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 {#sec-0b5438bac864}
```html
```
### ✅ Richtiges Beispiel: daisyUI‑Token nutzen, um dem Thema zu folgen {#sec-e1146fcf48a6}
```html
```
Wichtig ist hier nicht „Welche Farbe“, sondern „Welche Rolle“.
- `bg-base-100` : Grundhintergrund des Bildschirms/Karten
- `text-base-content` : Standardtextfarbe
- `btn-primary` : Hauptaktion (CTA)
Das Thema ersetzt die Farben entsprechend diesen Rollen.
---
## Was also unbedingt verwendet werden muss? {#sec-7cfab9901bed}
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:
```html
Zahlungshinweis fehlt.
```
---
## Thema anwenden: Mit `data-theme` die gesamte Stimmung ändern {#sec-4d6308cbf561}
Die Anwendung eines Themas ist überraschend einfach.
```html
```
Eine einzige Zeile (`data-theme`) ändert die Farb‑Variablensammlung für die gesamte App.
---
## Themen ändern ist nicht nur „global“: Abschnittsweise möglich {#sec-e0f142807b1a}
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
Alles ist dunkel
Dieser Abschnitt bleibt immer hell
Dieser Span ist retro
```
Diese Funktion wird in der Praxis oft häufiger genutzt als ein globaler Theme‑Toggle.
---
## Thema‑Management: Nur benötigte Themen aktivieren {#sec-ab5d0648dae0}
Nach der Installation verwalten Sie die aktiven Themen im CSS‑Block `@plugin "daisyui" { ... }`.
```css
@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:
```css
@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 {#sec-612655295e82}
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? {#sec-67726d664b47}
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 {#sec-b349bf2c99ab}
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!