DocsTheming

Theming

shadcn-style CSS variables in OKLCH, with a light and a dark mode.

Theme editorTune every variable, the radius and the shadows on the real components, then copy the result.

Choose a theme

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

Bases

The tint of the grays: backgrounds, borders, muted text.

neutralzincslatestonegray

Colors

They set --primary and --ring.

neutralbluegreenvioletroseredorangeyellow

The radius, --radius, is used to compute rounded-sm, rounded-md, rounded-lg and rounded-xl.

The variables

--background, --foreground, --card, --popover, --primary, --secondary, --muted, --accent, --destructive, --border, --input, --ring, --chart-1 to --chart-5, plus --success and --warning with their -foreground, and the sidebar variables --sidebar-*. They are exposed to Tailwind through @theme inline: write bg-primary, text-muted-foreground, border-border…

Customize

Write your variables below the marker in theme.css: theme set regenerates the whole file except that part.

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); }

Dark mode

It relies on the .dark class on <html>. theme-script applies it before the page paints, with no flash, and mode-toggle switches it.

‹ Installation CLI ›