Generatore di temi shadcn/ui: variabili CSS in OKLCH | We.Inc
Scegli tonalità, croma e raggio del tuo brand e ottieni ogni variabile CSS di shadcn/ui per la modalità chiara e scura in OKLCH, con anteprima dal vivo e controlli di contrasto.
I componenti shadcn/ui leggono i loro colori da variabili CSS come --primary, --muted e --border, scritte in OKLCH. Scegli qui tonalità, croma, luminosità, tinta dei grigi e raggio degli angoli, controlla l'anteprima chiara e scura dal vivo con i rapporti di contrasto, poi incolla i blocchi :root e .dark generati nel tuo foglio di stile globale.
Coppie di variabili definite da ogni tema shadcn/ui
Superficie
Testo sopra
Usata da
--background
--foreground
Corpo della pagina
--card / --popover
--card-foreground / --popover-foreground
Card, menu, finestre di dialogo
--primary
--primary-foreground
Pulsanti predefiniti, stati attivi
--secondary / --muted
--secondary-foreground / --muted-foreground
Pulsanti discreti, suggerimenti, didascalie
--accent
--accent-foreground
Voci di menu al passaggio del mouse
La documentazione sui temi definisce una trentina di variabili, e modificarle a mano è lento perché cambiare il colore primario cambia anche quale colore del testo resta leggibile sopra di esso. Questo generatore ricava l'intero set da poche scelte, sceglie un colore del testo leggibile per ogni superficie e segnala ogni coppia che scende sotto le soglie di contrasto più comuni.
Parti da un preset, oppure imposta tonalità, croma e luminosità del primario con i cursori. Il campione mostra il colore e ti avvisa se è fuori dalla gamma sRGB.
Aumenta la tinta dei grigi per dare a sfondi, bordi e testo attenuato un accenno della tonalità del brand. Zero li mantiene neutri.
Passa l'anteprima tra chiaro e scuro e leggi la tabella del contrasto per il testo su ogni superficie.
Copia il CSS e sostituisci i blocchi :root e .dark corrispondenti nel tuo globals.css. Mantieni il blocco @theme inline esistente, che collega queste variabili alle utility di Tailwind.
Tieni moderata la croma del primario, tra 0.12 e 0.2 circa, per interfacce che le persone usano tutto il giorno. Una croma molto alta risulta chiassosa sui pulsanti grandi.
Il tema scuro alza un po' la luminosità del primario, perché lo stesso colore sembra più spento su uno sfondo scuro.
Punta ad almeno 4.5:1 tra il testo del corpo e il suo sfondo, e controlla a parte il testo attenuato perché è più chiaro per scelta.
Se aggiungi un tuo colore, per esempio un avviso, definiscilo in entrambi i blocchi e aggiungi una voce --color-warning a @theme inline, come mostra la documentazione sui temi.
Domande frequenti
Perché OKLCH invece di HSL?
In OKLCH la luminosità segue quanto un colore appare chiaro, quindi due colori con la stessa L sembrano ugualmente chiari anche se le tonalità sono diverse. Questo rende più facile costruire set chiari e scuri coerenti. L'attuale documentazione sui temi di shadcn/ui usa OKLCH per ogni colore.
Cosa significa ogni numero OKLCH?
L è la luminosità da 0 (nero) a 1 (bianco), C è la croma, cioè quanto è vivace il colore, a partire da 0 per il grigio, e H è l'angolo della tonalità in gradi. Un alpha facoltativo segue una barra, come in oklch(1 0 0 / 10%).
Cosa cambia --radius?
I componenti arrotondano i loro angoli a partire da questo unico valore. La documentazione sui temi lo imposta a 0.625rem per impostazione predefinita, e il blocco @theme inline ne ricava i gradini di raggio più piccoli e più grandi.
Funziona con i progetti più vecchi?
I progetti basati su template più vecchi possono salvare i colori in un formato diverso e collegarli in modo diverso nella configurazione di Tailwind. Confronta il tuo globals.css con le variabili qui prima di sostituire qualcosa.
I rapporti di contrasto sono esatti?
Usano la formula WCAG 2 dopo aver convertito ogni colore OKLCH in sRGB, tagliando i valori fuori gamma. I colori fuori da sRGB appariranno leggermente diversi sugli schermi a gamma estesa.
Come viene ricavata la palette
Il tuo colore primario alimenta le variabili primary, ring e sidebar-primary. I grigi di sfondi, bordi e testo attenuato condividono un'unica tonalità con una croma minima impostata dal cursore della tinta, così l'interfaccia sembra legata al brand senza apparire colorata.
Ogni colore del testo viene scelto misurando il contrasto con la sua superficie e tenendo quello, tra un quasi bianco e un quasi nero, che si legge meglio. I colori dei grafici girano sulla ruota delle tonalità a partire da quella del primario, così le serie restano distinguibili.
Dettagli della modalità scura
Nel blocco scuro, bordi e campi di input usano il bianco con alpha basso invece di un grigio pieno, così si adattano a qualsiasi superficie su cui si trovano. Le card sono leggermente sollevate rispetto allo sfondo della pagina, così i livelli restano visibili.
Prova in particolare gli anelli di focus in modalità scura. Un anello ben visibile sul bianco può sparire su una pagina blu notte.
Esempio di output: il preset Blu
Questo è esattamente ciò che il generatore scrive per il preset Blu. Incollalo sopra i blocchi di colore in globals.css.
Blocchi di colore di globals.css
I valori chiari stanno in :root e quelli scuri in .dark, entrambi in OKLCH.
Aggiungere un tuo token di colore
Un colore di avviso utilizzabile come bg-warning
Definisci la coppia in entrambe le modalità, poi esponila a Tailwind tramite @theme inline.
Neutro
Blu
Viola
Verde
Arancione
Rosa
Preset: Neutro, Blu, Viola, Verde, Arancione, Rosa. Regola tonalità, croma, luminosità, tinta dei grigi e raggio, visualizza l'anteprima chiara e scura e copia il CSS.