Themes
Customize how your public profile looks.
Built-in presets
Boxli ships with 6 preset themes. Open the Theme Browser in the builder (right panel → no tile selected → Themes button) and click any preset to apply it instantly.
Minimal
minimal
Dark
dark
Warm
warm
Neon
neon
Earth
earth
Ocean
ocean
Community themes
Community themes live in lib/community-themes.ts in the repo. They're bundled at build time — zero runtime fetching. Open the Theme Browser, switch to the Community tab, and apply any theme with one click.
The community tab is empty on fresh installs. As contributors submit themes via PR, they appear here automatically.
How themes work
A theme is a BoxliTheme object that maps CSS variable names to values. When applied, Boxli injects a <style> tag into the profile page with those overrides.
CSS variables
| Variable | Controls |
|---|---|
| --bento-page-bg | Page background color |
| --bento-tile-bg | Default tile background |
| --bento-accent | Primary accent / interactive color |
| --bento-fg | Primary text / foreground |
| --bento-border | Tile and page border color |
Contribute a theme
Add a BoxliTheme object to lib/community-themes.ts and open a PR. No design tooling required — just TypeScript.