Générateur de thème shadcn/ui : variables CSS en OKLCH | We.Inc
Choisissez une teinte de marque, une chroma et un rayon, et obtenez toutes les variables CSS shadcn/ui pour les modes clair et sombre en OKLCH, avec un aperçu en direct et des vérifications de contraste.
Les composants shadcn/ui lisent leurs couleurs dans des variables CSS comme --primary, --muted et --border, écrites en OKLCH. Choisissez ici une teinte, une chroma, une luminosité, une teinte de gris et un rayon d'angle, vérifiez l'aperçu clair et sombre en direct avec les ratios de contraste, puis collez les blocs :root et .dark générés dans votre feuille de style globale.
Paires de variables définies par chaque thème shadcn/ui
Surface
Texte dessus
Utilisée par
--background
--foreground
Corps de la page
--card / --popover
--card-foreground / --popover-foreground
Cartes, menus, boîtes de dialogue
--primary
--primary-foreground
Boutons par défaut, états actifs
--secondary / --muted
--secondary-foreground / --muted-foreground
Boutons discrets, indications, légendes
--accent
--accent-foreground
Éléments de menu survolés
La documentation sur les thèmes définit une trentaine de variables, et les modifier à la main est lent, car changer la couleur principale change aussi la couleur de texte qui reste lisible dessus. Ce générateur dérive l'ensemble complet à partir de quelques choix, sélectionne un texte lisible pour chaque surface et signale toute paire qui passe sous les seuils de contraste courants.
Partez d'un préréglage, ou réglez la teinte, la chroma et la luminosité principales avec les curseurs. L'échantillon affiche la couleur et vous avertit si elle sort de la gamme sRGB.
Augmentez la teinte de gris pour donner aux fonds, bordures et textes atténués une touche de la teinte de marque. Zéro les garde parfaitement neutres.
Basculez l'aperçu entre clair et sombre et consultez le tableau de contraste pour le texte sur chaque surface.
Copiez le CSS et remplacez les blocs :root et .dark correspondants dans votre globals.css. Conservez le bloc @theme inline existant, qui relie ces variables aux utilitaires Tailwind.
Gardez une chroma principale modérée, autour de 0.12 à 0.2, pour des interfaces utilisées toute la journée. Une chroma très élevée paraît criarde sur de grands boutons.
Le thème sombre augmente un peu la luminosité de la couleur principale, car la même couleur paraît plus terne sur un fond sombre.
Visez au moins 4.5:1 entre le texte courant et son fond, et vérifiez séparément le texte atténué, plus clair par conception.
Si vous ajoutez votre propre couleur, comme un avertissement, définissez-la dans les deux blocs et ajoutez une entrée --color-warning à @theme inline, comme le montre la documentation sur les thèmes.
Questions fréquentes
Pourquoi OKLCH plutôt que HSL ?
La luminosité OKLCH suit la clarté perçue d'une couleur, donc deux couleurs avec un L égal paraissent aussi claires l'une que l'autre même si leurs teintes diffèrent. Il est ainsi plus facile de construire des jeux clair et sombre cohérents. La documentation actuelle des thèmes shadcn/ui utilise OKLCH pour toutes les couleurs.
Que signifie chaque nombre OKLCH ?
L est la luminosité de 0 (noir) à 1 (blanc), C est la chroma, c'est-à-dire l'intensité de la couleur, en partant de 0 pour le gris, et H est l'angle de teinte en degrés. Un alpha facultatif suit une barre oblique, comme dans oklch(1 0 0 / 10%).
Que modifie --radius ?
Les composants arrondissent leurs angles à partir de cette seule valeur. La documentation sur les thèmes la fixe à 0.625rem par défaut, et le bloc @theme inline en dérive des paliers de rayon plus petits et plus grands.
Est-ce compatible avec les anciens projets ?
Les projets basés sur d'anciens modèles peuvent stocker les couleurs dans un autre format et les relier différemment dans la configuration Tailwind. Comparez votre globals.css avec les variables d'ici avant de remplacer quoi que ce soit.
Les ratios de contraste sont-ils exacts ?
Ils utilisent la formule WCAG 2 après conversion de chaque couleur OKLCH en sRGB, en écrêtant toute valeur hors gamme. Les couleurs hors sRGB s'afficheront légèrement différemment sur les écrans à large gamut.
Comment la palette est dérivée
Votre couleur principale alimente les variables primary, ring et sidebar-primary. Les gris des fonds, bordures et textes atténués partagent une même teinte avec une chroma minime réglée par le curseur de teinte de gris, pour que l'interface s'accorde à la marque sans paraître colorée.
Chaque couleur de texte est choisie en mesurant le contraste avec sa surface et en retenant la plus lisible entre un quasi-blanc et un quasi-noir. Les couleurs de graphique avancent sur le cercle chromatique à partir de votre teinte principale pour que les séries restent distinctes.
Les détails du mode sombre
Dans le bloc sombre, les bordures et les champs utilisent du blanc à faible alpha au lieu d'un gris plein, ce qui leur permet de s'adapter à la surface sur laquelle ils se trouvent. Les cartes sont légèrement surélevées par rapport au fond de la page pour que les couches restent visibles.
Testez en particulier les anneaux de focus en mode sombre. Un anneau bien visible sur du blanc peut disparaître sur une page bleu marine foncé.
Exemple de résultat : le préréglage Bleu
Voici exactement ce que le générateur écrit pour le préréglage Bleu. Collez-le à la place des blocs de couleurs dans globals.css.
Blocs de couleurs de globals.css
Les valeurs claires sont dans :root et les valeurs sombres dans .dark, toutes en OKLCH.
Ajouter votre propre token de couleur
Une couleur d'avertissement utilisable avec bg-warning
Définissez la paire dans les deux modes, puis exposez-la à Tailwind via @theme inline.
Neutre
Bleu
Violet
Vert
Orange
Rose
Préréglages : Neutre, Bleu, Violet, Vert, Orange, Rose. Ajustez la teinte, la chroma, la luminosité, la teinte de gris et le rayon, prévisualisez en clair et en sombre, et copiez le CSS.