shadcn/ui theme-generator: CSS-variabelen in OKLCH | We.Inc
Kies een merktint, chroma en radius en krijg elke shadcn/ui CSS-variabele voor de lichte en donkere modus in OKLCH, met een live voorbeeld en contrastcontroles.
shadcn/ui-componenten lezen hun kleuren uit CSS-variabelen zoals --primary, --muted en --border, geschreven in OKLCH. Kies hier een tint, chroma, lichtheid, grijstint en hoekradius, controleer het live voorbeeld in licht en donker met contrastverhoudingen, en plak daarna de gegenereerde blokken :root en .dark in uw globale stylesheet.
Variabeleparen die elk shadcn/ui-thema definieert
Oppervlak
Tekst erop
Gebruikt door
--background
--foreground
Pagina-inhoud
--card / --popover
--card-foreground / --popover-foreground
Kaarten, menu's, dialogen
--primary
--primary-foreground
Standaardknoppen, actieve toestanden
--secondary / --muted
--secondary-foreground / --muted-foreground
Rustige knoppen, hints, bijschriften
--accent
--accent-foreground
Menu-items onder de muis
De themadocumentatie definieert ongeveer dertig variabelen, en ze met de hand bewerken gaat traag, omdat een wijziging van de primaire kleur ook bepaalt welke tekstkleur erop leesbaar blijft. Deze generator leidt de hele set af uit een paar keuzes, kiest voor elk oppervlak een leesbare voorgrond en markeert elk paar dat onder gangbare contrastdoelen valt.
Begin met een preset, of stel de primaire tint, chroma en lichtheid in met de schuifregelaars. Het kleurvlak toont de kleur en waarschuwt als die buiten het sRGB-bereik valt.
Verhoog de grijstint om achtergronden, randen en gedempte tekst een vleugje van de merktint te geven. Nul houdt ze puur neutraal.
Wissel het voorbeeld tussen licht en donker en lees de contrasttabel voor tekst op elk oppervlak.
Kopieer de CSS en vervang de bijbehorende blokken :root en .dark in uw globals.css. Behoud het bestaande blok @theme inline, dat deze variabelen koppelt aan Tailwind-utilities.
Houd de chroma van de primaire kleur gematigd, ongeveer 0.12 tot 0.2, voor interfaces die mensen de hele dag gebruiken. Een zeer hoge chroma oogt schreeuwerig op grote knoppen.
Het donkere thema verhoogt de lichtheid van de primaire kleur iets, omdat dezelfde kleur op een donkere achtergrond doffer lijkt.
Mik op minstens 4.5:1 tussen lopende tekst en de achtergrond, en controleer gedempte tekst apart, omdat die bewust lichter is.
Voegt u een eigen kleur toe, zoals een waarschuwingskleur, definieer die dan in beide blokken en voeg een --color-warning-item toe aan @theme inline, zoals de themadocumentatie laat zien.
Veelgestelde vragen
Waarom OKLCH in plaats van HSL?
De lichtheid in OKLCH volgt hoe helder een kleur eruitziet, dus twee kleuren met gelijke L voelen even licht aan, ook als hun tinten verschillen. Dat maakt het makkelijker om bij elkaar passende lichte en donkere sets te bouwen. De huidige themadocumentatie van shadcn/ui gebruikt OKLCH voor elke kleur.
Wat betekent elk OKLCH-getal?
L is de lichtheid van 0 (zwart) tot 1 (wit), C is de chroma, hoe levendig de kleur is, beginnend bij 0 voor grijs, en H is de tinthoek in graden. Een optionele alfa volgt na een schuine streep, zoals in oklch(1 0 0 / 10%).
Wat verandert --radius?
Componenten ronden hun hoeken af op basis van deze ene waarde. De themadocumentatie zet die standaard op 0.625rem, en het blok @theme inline leidt er kleinere en grotere radiusstappen van af.
Werkt dit met oudere projecten?
Projecten op oudere templates slaan kleuren mogelijk op in een ander formaat en koppelen ze anders in de Tailwind-config. Vergelijk uw globals.css met de variabelen hier voordat u iets vervangt.
Zijn de contrastverhoudingen exact?
Ze gebruiken de WCAG 2-formule nadat elke OKLCH-kleur naar sRGB is omgezet, waarbij waarden buiten het bereik worden afgekapt. Kleuren buiten sRGB worden op schermen met een breed kleurbereik iets anders weergegeven.
Hoe het palet wordt afgeleid
Uw primaire kleur voedt de variabelen primary, ring en sidebar-primary. Grijzen voor achtergronden, randen en gedempte tekst delen één tint met een kleine chroma die door de grijstint-schuifregelaar wordt bepaald, zodat de interface verwant aanvoelt aan het merk zonder gekleurd te lijken.
Elke voorgrond wordt gekozen door het contrast met het oppervlak te meten en te houden wat het best leest, bijna-wit of bijna-zwart. Grafiekkleuren lopen vanaf uw primaire tint rond het kleurenwiel, zodat reeksen van elkaar te onderscheiden blijven.
Details van de donkere modus
In het donkere blok gebruiken randen en invoervelden wit met een lage alfa in plaats van een effen grijs, zodat ze zich aanpassen aan elk oppervlak waarop ze staan. Kaarten worden iets boven de pagina-achtergrond getild, zodat lagen zichtbaar blijven.
Test vooral focusringen in de donkere modus. Een ring die op wit duidelijk is, kan op een diepblauwe pagina verdwijnen.
Voorbeelduitvoer: de preset Blauw
Dit is precies wat de generator schrijft voor de preset Blauw. Plak het over de kleurblokken in globals.css.
Kleurblokken in globals.css
Lichte waarden staan in :root en donkere waarden in .dark, beide in OKLCH.
Uw eigen kleurtoken toevoegen
Een waarschuwingskleur bruikbaar als bg-warning
Definieer het paar in beide modi en stel het daarna via @theme inline beschikbaar aan Tailwind.
Neutraal
Blauw
Violet
Groen
Oranje
Roze
Presets: Neutraal, Blauw, Violet, Groen, Oranje, Roze. Pas tint, chroma, lichtheid, grijstint en radius aan, bekijk licht en donker, en kopieer de CSS.