Prefab uses shadcn/ui CSS variables for all colors. The default theme is shadcn’s zinc palette — achromatic surfaces with neutral accents. Pass a theme to PrefabApp to override any color variable in the system.
Built-in Themes
Six color themes shift the primary, ring, and chart colors while keeping surfaces neutral:
from prefab_ui.app import PrefabApp
from prefab_ui.themes import blue
app = PrefabApp(view=my_view, theme=blue)
| Import | Hue |
|---|
blue | Blue — buttons, focus rings, charts |
green | Emerald green |
red | Warm red |
orange | Bright orange |
violet | Purple / violet |
rose | Pink / rose |
Theme instances — you can inspect their light and dark dicts to see the exact values.
Custom Themes
A Theme is a pair of dictionaries mapping shadcn variable names to CSS color values. The light dict applies to light mode, dark to dark mode:
from prefab_ui import Theme
my_theme = Theme(
light=dict(
primary="oklch(0.72 0.19 149)",
background="oklch(0.97 0.01 244)",
ring="oklch(0.72 0.19 149)",
),
dark=dict(
primary="oklch(0.77 0.15 163)",
background="oklch(0.21 0.04 265)",
ring="oklch(0.77 0.15 163)",
),
)
app = PrefabApp(view=my_view, theme=my_theme)
dark, the light values are used for both modes.
Variable Names
Keys are the standard shadcn CSS variable names without the -- prefix:
| Key | Controls |
|---|
primary / primary-foreground | Primary buttons, active states |
secondary / secondary-foreground | Secondary buttons |
accent / accent-foreground | Highlighted surfaces |
background / foreground | Page background and text |
card / card-foreground | Card surfaces |
muted / muted-foreground | Subdued text and surfaces |
destructive / destructive-foreground | Delete / error actions |
border | Borders and dividers |
input | Input field borders |
ring | Focus rings |
chart-1 through chart-5 | Chart color palette |
radius | Border radius (0.5rem, etc.) |
oklch(), hsl(), hex, named colors.
Using shadcn Theme Generators
The shadcn themes page and other community theme generators produce CSS with the same variable names Prefab uses. You can paste their output directly as an inline stylesheet:
app = PrefabApp(
view=my_view,
stylesheets=["""
:root {
--primary: oklch(0.7227 0.1920 149.5793);
--primary-foreground: oklch(1.0000 0 0);
--ring: oklch(0.7227 0.1920 149.5793);
}
.dark {
--primary: oklch(0.7729 0.1535 163.2231);
--primary-foreground: oklch(0.2077 0.0398 265.7549);
--ring: oklch(0.7729 0.1535 163.2231);
}
"""],
)
stylesheets field accepts both URLs and inline CSS strings. Inline CSS (detected by the presence of {) is injected as a <style> tag; URLs are loaded as <link> tags.
When copying from a shadcn theme generator, you only need the :root { ... } and .dark { ... } blocks. Strip out @import, @theme inline, and @layer base directives — Prefab’s renderer already handles those.