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

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

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

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

- [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/)