Themes

Token sets that drive color, font, and radius across every block and primitive. Swap themes without touching components.

What themes are

A theme is a tokens.css file that defines Tailwind v4 @theme custom properties — --color-background, --color-card, --font-display, --radius-lg, and so on. Blocks and primitives reference these tokens semantically (bg-card, font-display), never raw values. Switch themes → everything restyles.

Install

bun x bosia@latest add theme editorial

The CLI copies tokens to src/lib/themes/<name>.css and rewrites the active import in src/app.css. Only one theme is active at a time (v1).

Available themes

  • neutral — default shadcn-inspired palette + system stack
  • editorial — warm cream + Instrument Serif display
  • zinc — cool blue-gray, developer-tool aesthetic
  • stone — warm gray, document and publishing aesthetic
  • claude — violet palette, AI assistant and productivity aesthetic
  • ocean — deep navy + teal, SaaS and data app aesthetic
  • forest — earthy green + amber, nature and sustainability aesthetic
  • rose — rose palette, creative and lifestyle aesthetic

Authoring a theme

See Creating themes.