daisyUI Farb-Namen & Klassen-Cheat-Sheet: Unverzichtbare Tabelle für Theme-Wechsel
daisyUI wird vor allem genutzt, um Theme-Wechsel einfach zu machen. Diese Stärke geht jedoch verloren, sobald Entwickler oder Designer feste Tailwind-Farben wie bg-blue-500 hart codieren. Stattdessen solltest du die von daisyUI bereitgestellten semantischen Farb-Namen wie primary, base-100, error verwenden und sie über Klassen wie btn-primary, bg-base-200, text-error anwenden. Dann folgt beim Theme-Wechsel automatisch der gesamte UI-Ton.
Entscheidend ist also, die Farb-Namen und Klassenmuster zu kennen und richtig zu kombinieren. Erfahrene Designer haben das oft im Gefühl, aber für Anfänger oder Backend-/Full-Stack-Entwickler, die nur gelegentlich am UI arbeiten, ist es schneller, dieses Cheat-Sheet griffbereit zu haben. Dieser Beitrag dient genau diesem Zweck: Er fasst übersichtlich zusammen, wann welche Farb-Namen sinnvoll sind und wie du sie in Klassen einsetzt.
Farb-Namen (Wann einsetzen)
| Farb-Name | Wann verwenden? (Kurz) | Typisches Beispiel |
|---|---|---|
primary |
Haupt-Theme-Farbe der Marke | Haupt-Buttons, zentrale CTAs |
primary-content |
Text/Icons auf primary |
Text auf primary-Buttons |
secondary |
Sekundäre Aktion / Sub-Branding | Nebenbuttons, sekundäre Hervorhebung |
secondary-content |
Text/Icons auf secondary |
Text in secondary-Bereichen |
accent |
Akzent / Hervorhebung | Badges, Link-Highlights, Akzent-Elemente |
accent-content |
Text/Icons auf accent |
Text auf accent-Hintergrund |
neutral |
Neutrale UI (dunkler Ton) | Navigation, Footer, dunkle Panels |
neutral-content |
Text/Icons auf neutral |
Text in neutral-Bereichen |
base-100 |
Standard-Seitenhintergrund | Page-/Canvas-Hintergrund |
base-200 |
Etwas angehobene Oberfläche | Cards, Abschnittshintergründe |
base-300 |
Stärkere Trennung / Ebene | Divider, tiefere Panels |
base-content |
Text/Icons auf der Base-Reihe | Standard-Fließtext |
info |
Information / Hinweis | Info-Banner, Hinweise |
info-content |
Text/Icons auf info |
Text auf info-Hintergrund |
success |
Erfolg / positiv | Erfolgs-Alerts, Bestätigung |
success-content |
Text/Icons auf success |
Text auf success-Hintergrund |
warning |
Warnung / Vorsicht | Warnmeldungen, Bestätigung nötig |
warning-content |
Text/Icons auf warning |
Text auf warning-Hintergrund |
error |
Fehler / Gefahr | Fehlerzustände, destruktive Aktionen |
error-content |
Text/Icons auf error |
Text auf error-Hintergrund |
Klassenmuster (Regeln zur Kombination von Farb-Namen)
| Zweck | Muster | Beispiel |
|---|---|---|
| Hintergrundfarbe | bg-{COLOR} |
bg-primary, bg-base-200 |
| Textfarbe | text-{COLOR} |
text-base-content, text-error |
| Rahmen | border-{COLOR} |
border-neutral, border-base-300 |
| Gradient Start/Mitte/Ende | from- / via- / to-{COLOR} |
from-primary via-accent to-secondary |
| Ring (Focus) | ring-{COLOR} |
ring-primary |
| Ring-Offset | ring-offset-{COLOR} |
ring-offset-base-100 |
| SVG-Füllung | fill-{COLOR} |
fill-accent |
| SVG-Linie | stroke-{COLOR} |
stroke-neutral-content |
| Schatten | shadow-{COLOR} |
shadow-primary |
| Umriss | outline-{COLOR} |
outline-info |
| Trennlinie (divide) | divide-{COLOR} |
divide-base-300 |
| Formular-Akzent | accent-{COLOR} |
accent-primary |
| Caret | caret-{COLOR} |
caret-primary |
| Unterstreichung/Decoration | decoration-{COLOR} |
decoration-accent |
| Platzhalter | placeholder-{COLOR} |
placeholder-base-content |
Opazität zur Intensitätsanpassung
| Zweck | Muster | Beispiel |
|---|---|---|
| Leichter Hintergrund | bg-{COLOR}/10 |
bg-primary/10, bg-success/15 |
| Dezenter Rahmen | border-{COLOR}/30 |
border-error/30 |
| Hellerer Text | text-{COLOR}/70 |
text-base-content/70 |
| Hover-Intensität | hover:bg-{COLOR}/80 |
hover:bg-primary/80 |
Wenn du die Intensität einer Farbe anpassen willst, hänge
/{Zahl}(in Prozent) an die Klasse an. Das Überschreiben der vorhandenen Farb-Namen ist okay, aber zusätzliche, beliebige Farben direkt im HTML brechen die Design-Konsistenz und können beim Theme-Wechsel zu unerwarteten Ergebnissen führen. Am besten bleibst du bei den semantischen Namen.
Weiterführende Artikel: