shadcn/ui Theme-Generator: CSS-Variablen in OKLCH | We.Inc
Wähle Farbton, Chroma und Radius deiner Marke und erhalte alle CSS-Variablen von shadcn/ui für Light und Dark Mode in OKLCH, mit Live-Vorschau und Kontrastprüfung.
shadcn/ui-Komponenten lesen ihre Farben aus CSS-Variablen wie --primary, --muted und --border, angegeben in OKLCH. Wähle hier Farbton, Chroma, Helligkeit, Grautönung und Eckenradius, prüfe die Live-Vorschau in Hell und Dunkel mit Kontrastverhältnissen und füge dann die erzeugten Blöcke :root und .dark in dein globales Stylesheet ein.
Variablenpaare, die jedes shadcn/ui-Theme definiert
Fläche
Text darauf
Verwendet von
--background
--foreground
Seiteninhalt
--card / --popover
--card-foreground / --popover-foreground
Karten, Menüs, Dialoge
--primary
--primary-foreground
Standard-Buttons, aktive Zustände
--secondary / --muted
--secondary-foreground / --muted-foreground
Dezente Buttons, Hinweise, Beschriftungen
--accent
--accent-foreground
Menüpunkte beim Hover
Die Theming-Doku definiert rund dreißig Variablen, und sie von Hand zu bearbeiten ist mühsam, weil eine Änderung der Primärfarbe auch bestimmt, welche Textfarbe darauf lesbar bleibt. Dieser Generator leitet den ganzen Satz aus wenigen Entscheidungen ab, wählt für jede Fläche eine lesbare Vordergrundfarbe und markiert jedes Paar, das unter gängigen Kontrastzielen liegt.
Starte mit einer Vorlage oder stelle Farbton, Chroma und Helligkeit der Primärfarbe mit den Reglern ein. Das Farbfeld zeigt die Farbe und warnt, wenn sie außerhalb des sRGB-Bereichs liegt.
Erhöhe die Grautönung, um Hintergründen, Rahmen und gedämpftem Text einen Hauch des Markenfarbtons zu geben. Null lässt sie rein neutral.
Schalte die Vorschau zwischen Hell und Dunkel um und lies die Kontrasttabelle für Text auf jeder Fläche.
Kopiere das CSS und ersetze die passenden Blöcke :root und .dark in deiner globals.css. Behalte den vorhandenen Block @theme inline, der diese Variablen den Tailwind-Utilities zuordnet.
Halte die Chroma der Primärfarbe moderat, etwa 0.12 bis 0.2, für Oberflächen, die Menschen den ganzen Tag nutzen. Sehr hohe Chroma wirkt auf großen Buttons grell.
Das dunkle Theme hebt die Helligkeit der Primärfarbe leicht an, weil dieselbe Farbe auf dunklem Hintergrund matter wirkt.
Ziele auf mindestens 4.5:1 zwischen Fließtext und Hintergrund und prüfe gedämpften Text separat, weil er bewusst heller ist.
Wenn du eine eigene Farbe hinzufügst, etwa eine Warnung, definiere sie in beiden Blöcken und ergänze einen Eintrag --color-warning in @theme inline, wie in der Theming-Doku gezeigt.
Häufige Fragen
Warum OKLCH statt HSL?
Die Helligkeit in OKLCH folgt dem, wie hell eine Farbe wirkt. Zwei Farben mit gleichem L erscheinen also gleich hell, auch wenn ihre Farbtöne verschieden sind. Das erleichtert passende helle und dunkle Sätze. Die aktuelle Theming-Doku von shadcn/ui nutzt OKLCH für jede Farbe.
Was bedeutet jede OKLCH-Zahl?
L ist die Helligkeit von 0 (Schwarz) bis 1 (Weiß), C ist die Chroma, also wie kräftig die Farbe ist, beginnend bei 0 für Grau, und H ist der Farbtonwinkel in Grad. Ein optionaler Alphawert folgt nach einem Schrägstrich, wie in oklch(1 0 0 / 10%).
Was ändert --radius?
Komponenten runden ihre Ecken anhand dieses einen Werts. Die Theming-Doku setzt ihn standardmäßig auf 0.625rem, und der Block @theme inline leitet daraus kleinere und größere Radiusstufen ab.
Funktioniert das mit älteren Projekten?
Projekte mit älteren Vorlagen speichern Farben eventuell in einem anderen Format und ordnen sie in der Tailwind-Konfiguration anders zu. Vergleiche deine globals.css mit den Variablen hier, bevor du etwas ersetzt.
Sind die Kontrastverhältnisse exakt?
Sie nutzen die WCAG-2-Formel, nachdem jede OKLCH-Farbe nach sRGB umgerechnet wurde, wobei Werte außerhalb des Bereichs abgeschnitten werden. Farben außerhalb von sRGB werden auf Wide-Gamut-Bildschirmen etwas anders dargestellt.
Wie die Palette abgeleitet wird
Deine Primärfarbe speist die Variablen primary, ring und sidebar-primary. Grautöne für Hintergründe, Rahmen und gedämpften Text teilen sich einen Farbton mit einer winzigen Chroma, die der Tönungsregler festlegt. So wirkt die Oberfläche mit der Marke verwandt, ohne farbig auszusehen.
Jede Vordergrundfarbe wird gewählt, indem der Kontrast zu ihrer Fläche gemessen und von einem fast weißen oder fast schwarzen Ton der besser lesbare behalten wird. Diagrammfarben wandern ausgehend von deinem Primärfarbton um den Farbkreis, damit Datenreihen unterscheidbar bleiben.
Details zum Dark Mode
Im dunklen Block nutzen Rahmen und Eingabefelder Weiß mit niedrigem Alpha statt eines deckenden Graus, wodurch sie sich jeder Fläche anpassen, auf der sie liegen. Karten heben sich leicht vom Seitenhintergrund ab, damit Ebenen sichtbar bleiben.
Teste besonders Fokusringe im Dark Mode. Ein Ring, der auf Weiß deutlich ist, kann auf einer tief marineblauen Seite verschwinden.
Beispielausgabe: die Vorlage Blue
Genau das schreibt der Generator für die Vorlage Blue. Füge es über die Farbblöcke in globals.css ein.
Farbblöcke in globals.css
Helle Werte stehen in :root, dunkle in .dark, beide in OKLCH.
Ein eigenes Farb-Token hinzufügen
Eine Warnfarbe, nutzbar als bg-warning
Definiere das Paar in beiden Modi und stelle es dann über @theme inline für Tailwind bereit.
Neutral
Blau
Violett
Grün
Orange
Rosé
Vorlagen: Neutral, Blau, Violett, Grün, Orange, Rosé. Passe Farbton, Chroma, Helligkeit, Grautönung und Radius an, sieh dir Hell und Dunkel in der Vorschau an und kopiere das CSS.
Projekt erstellen
Stelle dein neues Projekt mit einem Klick bereit.
Name
Acme-Website
Bereitstellen
Abbrechen
Löschen
Menüpunkt beim Hover
Diagrammfarben
Erstelle dein Theme
Vorlagen
Etwa {hex} in sRGB
, außerhalb von sRGB, daher von Bildschirmen abgeschnitten