DocsThèmes

Thèmes

Des variables CSS au format shadcn, en OKLCH, avec un mode clair et un mode sombre.

Éditeur de thèmesRéglez chaque variable, le rayon et les ombres sur les vrais composants, puis copiez le résultat.

Choisir un thème

pyblade-ui theme list
pyblade-ui theme set --base slate --color rose --radius 0.75rem

Bases

La teinte des gris : fonds, bordures, texte atténué.

neutralzincslatestonegray

Couleurs

Elles définissent --primary et --ring.

neutralbluegreenvioletroseredorangeyellow

Le rayon, --radius, sert à calculer rounded-sm, rounded-md, rounded-lg et rounded-xl.

Les variables

--background, --foreground, --card, --popover, --primary, --secondary, --muted, --accent, --destructive, --border, --input, --ring, --chart-1 à --chart-5, plus --success et --warning avec leur -foreground, et les variables du sidebar --sidebar-*. Elles sont exposées à Tailwind via @theme inline : écrivez bg-primary, text-muted-foreground, border-border…

Personnaliser

Écrivez vos variables sous le marqueur de theme.css : theme set régénère tout le fichier sauf cette partie.

static/css/theme.css

/* pyblade-ui:custom -- everything below this line is kept when the theme is regenerated */
:root { --primary: oklch(0.6 0.2 160); }
.dark { --primary: oklch(0.7 0.18 160); }

Mode sombre

Il repose sur la classe .dark posée sur <html>. theme-script l'applique avant l'affichage de la page, sans clignotement, et mode-toggle la bascule.

‹ Installation CLI ›