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:

​
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:
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:
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:

​
Custom Themes

Theme gives full control. The css field accepts any CSS for component styling, fonts, and overrides:
For color overrides that differ between light and dark mode, use light_css and dark_css:

​
Variable Reference

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.