daisyUI Farb-Namen & Klassen-Cheat-Sheet: Unverzichtbare Tabelle für Theme-Wechsel
daisyUI wird vor allem genutzt, um Theme-Wechsel einfach zu gestalten. Diese Stärke geht jedoch verloren, sobald Entwickler/Designer die festen Tailwind-Farben wie bg-blue-500 direkt einbauen. Stattdessen kann man die von daisyUI bereitgestellten semantischen Farb-Namen wie primary, base-100, error verwenden und Klassen wie btn-primary, bg-base-200, text-error schreiben. Dann ändert sich bei einem Theme-Wechsel die gesamte UI automatisch.
Das Kernprinzip ist also Farb-Namen und Klassenmuster zu kennen und sie zu kombinieren. Erfahrene Designer merken sich das intuitiv, aber für Anfänger oder Backend/Full‑Stack‑Entwickler, die gelegentlich UI erstellen, ist es schneller, dieses Cheat‑Sheet griffbereit zu haben. In diesem Beitrag habe ich deshalb eine übersichtliche Tabelle erstellt, die zeigt, wann welche Farb-Namen verwendet werden und wie sie in Klassen eingebunden werden.
Farb-Namen (Wann einsetzen)
| Farb-Name | Wann verwenden? (Kurz) | Typisches Beispiel |
|---|---|---|
primary |
Haupt-Theme-Farbe des Brands | Haupt-Button, zentrale CTA |
primary-content |
Text/Icons über primary |
Textfarbe eines primary-Buttons |
secondary |
Sekundäre Aktionen/Unterbrand | Unter-Button, sekundäre Hervorhebung |
secondary-content |
Text/Icons über secondary |
Textfarbe im secondary-Bereich |
accent |
Highlight/Point | Badge, Link-Hervorhebung, Akzent-Element |
accent-content |
Text/Icons über accent |
Textfarbe auf accent-Hintergrund |
neutral |
Neutrales UI (dunkel) | Navigation, Footer, tiefes Panel |
neutral-content |
Text/Icons über neutral |
Textfarbe im neutral-Bereich |
base-100 |
Grundhintergrund der Seite | Seiten- bzw. Canvas-Hintergrund |
base-200 |
Leicht angehobene Oberfläche | Karte, Abschnittshintergrund |
base-300 |
Stärkeres Trennzeichen/Layer | Trennlinie, tiefes Panel |
base-content |
Text/Icons über base |
Standard-Text der Seite |
info |
Information/Guide | Info-Banner, Hinweis |
info-content |
Text/Icons über info |
Textfarbe auf info-Hintergrund |
success |
Erfolg/Normalität | Erfolgsmeldung, Bestätigung |
success-content |
Text/Icons über success |
Textfarbe auf success-Hintergrund |
warning |
Warnung/Attention | Warnmeldung, Bestätigungsbedarf |
warning-content |
Text/Icons über warning |
Textfarbe auf warning-Hintergrund |
error |
Fehler/Risiko | Fehlermeldung, kritische Aktion |
error-content |
Text/Icons über error |
Textfarbe auf error-Hintergrund |
Klassenmuster (Regeln zur Kombination von Farb-Namen)
| Zweck | Muster | Beispiel |
|---|---|---|
| Hintergrundfarbe | bg-{FARB} |
bg-primary, bg-base-200 |
| Textfarbe | text-{FARB} |
text-base-content, text-error |
| Rahmen | border-{FARB} |
border-neutral, border-base-300 |
| Gradient Start/Mitte/Ende | from- / via- / to-{FARB} |
from-primary via-accent to-secondary |
| Ring (Focus) | ring-{FARB} |
ring-primary |
| Ring-Offset | ring-offset-{FARB} |
ring-offset-base-100 |
| SVG-Füllung | fill-{FARB} |
fill-accent |
| SVG-Linie | stroke-{FARB} |
stroke-neutral-content |
| Schatten | shadow-{FARB} |
shadow-primary |
| Umriss | outline-{FARB} |
outline-info |
| Trennlinie (divide) | divide-{FARB} |
divide-base-300 |
| Formular-Akzent | accent-{FARB} |
accent-primary |
| Caret | caret-{FARB} |
caret-primary |
| Unterstreichung/Decoration | decoration-{FARB} |
decoration-accent |
| Platzhalter | placeholder-{FARB} |
placeholder-base-content |
Opazität zur Intensitätsanpassung
| Zweck | Muster | Beispiel |
|---|---|---|
| Heller Hintergrund | bg-{FARB}/10 |
bg-primary/10, bg-success/15 |
| Zarter Rahmen | border-{FARB}/30 |
border-error/30 |
| Schwacher Text | text-{FARB}/70 |
text-base-content/70 |
| Hover-Stärke anpassen | hover:bg-{FARB}/80 |
hover:bg-primary/80 |
Wenn Sie die Intensität einer Farbe anpassen möchten, fügen Sie nach der Klasse einen
/Zahl(%)hinzu. Das Überschreiben der Farb-Namen ist akzeptabel, aber das Hinzufügen neuer Farben außerhalb der definierten Namen kann die Design‑Kohärenz beeinträchtigen und bei Theme-Wechseln auffällig sein.
Weiterführende Artikel :