# 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**.

![Roboterentwickler und Farbpalette](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## Farb-Namen (Wann einsetzen) {#sec-4d3fa8b26445}

| 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) {#sec-5007f90f39f0}

| 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 {#sec-c72e6700b4d3}

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

* [daisyUI Theme: 35 Farbpaletten für die perfekte Farbwahl](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)
* [Tailwind CSS Plugin daisyUI: Schnell UI mit Klassen erstellen](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)