Themes

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, data-oriented styling, and — since a theme can restyle every component — total conversions like rendering your dashboard as a Windows 2000 program. In the playground and documentation previews, theme styles stay with the preview and its overlays, so component overrides also reach popovers and dialogs while the surrounding editor or page keeps its appearance. 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"))

Default
Presentation
Minimal
Windows 2000
MySpace

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.

A total conversion: beveled gray controls, square corners, Tahoma, sunken white text fields, list-view tables with raised column headers, and progress bars that march across in chunky segments. Charts use the VGA palette. Because it restyles the standard components rather than bespoke classes, an existing dashboard becomes a Windows 2000 program by changing one line.The window chrome above is not made of special components. pf-window, pf-title-bar, pf-title-bar-button, pf-menu-bar, pf-status-bar, pf-status-segment, and pf-inset are utility classes the theme ships with, applied to ordinary Div, Row, and Span components. They exist only while the theme is applied.

Black ground with a tiled star field, neon pink and cyan glow on every border, Comic Neue, and lime body text. Charts run hot pink, cyan, lime, yellow, and magenta.pf-neon-pink, pf-neon-cyan, pf-neon-lime, pf-neon-yellow, pf-visitor-counter, pf-construction, pf-blink, pf-rainbow, and pf-sparkle come with the theme. The three animated classes sit behind a prefers-reduced-motion guard, so they hold still for viewers who have asked their OS for less motion — blinking text at 1Hz is a real vestibular and photosensitivity risk, not just a stylistic one. For a scrolling banner, use Carousel(continuous=True), which the theme styles with cyan rails.

Windows 2000 and MySpace are inspired by Anders Swanson’s mods of Prefab, built for his dashboard bake-off comparing dashboarding tools on the same dbt-fusion issue data. His originals live in dataders/fusion_issue_analysis.

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

Variable	Controls
`primary` / `primary-foreground`	Primary buttons, active states
`secondary` / `secondary-foreground`	Secondary buttons
`accent` / `accent-foreground`	Highlighted surfaces
`background` / `foreground`	Page background and default text
`card` / `card-foreground`	Card surfaces
`muted` / `muted-foreground`	Subdued text and surfaces
`destructive`	Delete and error states
`success` / `warning` / `info`	Semantic status colors
`border`	Borders and dividers
`ring`	Focus rings
`chart-1` through `chart-5`	Chart color palette
`radius`	Border radius
`card-padding-y`	Card vertical padding (default `1rem`)
`layout-gap`	Gap 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. Presets that force a color scheme keep it across code edits. The light/dark toggle can override the selected preset’s mode; custom CSS does not force a color scheme. Every built-in theme is a picker preset, so any example in these docs can be flipped into Windows 2000 or MySpace without touching its code. The presets are compiled from the Python classes at build time by tools/generate_theme_presets.py, which means the picker and PrefabApp(theme=...) cannot disagree.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Themes

Themes

Accent

Fonts

Color Scheme

Custom Themes

Variable Reference

Themes in the Playground

​Themes

​Accent

​Fonts

​Color Scheme

​Custom Themes

​Variable Reference

​Themes in the Playground

Themes

Accent

Fonts

Color Scheme

Custom Themes

Variable Reference

Themes in the Playground