DocsThèmes

Thèmes

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

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. 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 ›