Skip to main content
Prefab renders with sensible defaults out of the box: system fonts, automatic gaps between cards, comfortable card padding, and gradient fills on progress bars. No theme is required for a polished look. Themes let you go further: accent colors, custom fonts, dark chrome, and data-oriented styling. Pass a theme to PrefabApp: 
from prefab_ui.app import PrefabApp
from prefab_ui.themes import Presentation

app = PrefabApp(view=my_view, theme=Presentation(accent="blue"))

​
Themes

No theme needed. The base renderer ships with system fonts, automatic gaps between cards, comfortable card padding, and gradient fills. This is what every PrefabApp looks like with no theme argument.

​
Accent

All themes accept accent, which controls the primary color, focus rings, and chart colors. Pass a Tailwind color name, CSS color string, or OKLCH hue number: 
Basic(accent="amber")          # Tailwind name (defaults to 500 shade)
Basic(accent="amber-600")      # specific shade
Basic(accent="#3b82f6")        # hex
Basic(accent=260)              # OKLCH hue (0-360)
With accent=None (the default), no color overrides are applied and components use the renderer’s neutral zinc palette.

​
Fonts

font sets the sans-serif typeface. font_mono sets the monospace font. Both auto-import from Google Fonts: 
Basic(font="Geist", font_mono="Geist Mono")
Presentation(font="IBM Plex Sans")
Presentation loads Inter by default, a typeface optimized for screen readability with tabular numerals that keep table columns aligned. The base renderer uses the platform’s system font stack for zero-latency rendering with no font download.

​
Color Scheme

By default, themes follow the OS preference for light or dark mode. Presentation’s dark slate chrome renders dark regardless of system preference. Override on any theme with mode: 
Basic(accent="blue", mode="dark")
Presentation(mode="light")

​
Custom Themes

Theme gives full control. The css field accepts any CSS for component styling, fonts, and overrides: 
from prefab_ui.themes import Theme

Theme(font="Inter", css=".pf-table-cell { font-variant-numeric: tabular-nums; }")
For color overrides that differ between light and dark mode, use light_css and dark_css: 
Theme(
    light_css="--primary: oklch(0.60 0.24 260); --ring: oklch(0.60 0.24 260);",
    dark_css="--primary: oklch(0.70 0.18 260); --ring: oklch(0.70 0.18 260);",
)

​
Variable Reference

VariableControls
primary / primary-foregroundPrimary buttons, active states
secondary / secondary-foregroundSecondary buttons
accent / accent-foregroundHighlighted surfaces
background / foregroundPage background and default text
card / card-foregroundCard surfaces
muted / muted-foregroundSubdued text and surfaces
destructiveDelete and error states
success / warning / infoSemantic status colors
borderBorders and dividers
ringFocus rings
chart-1 through chart-5Chart color palette
radiusBorder radius
card-padding-yCard vertical padding (default 1rem)
layout-gapGap between cards in containers (default 1rem)
Prefab’s CSS variables follow shadcn/ui naming conventions, so output from any shadcn theme generator can be pasted directly into light_css and dark_css.

​
Themes in the Playground

Themes apply in the playground exactly as in production. The toolbar’s theme picker overrides the code theme when active; selecting “Code” restores whatever your code defines.