Themes

ChoosingCopy Anchor Link

Set appearance.theme in makev1.config.ts: makev1, studio, paper or neutral. Compare them in the theme showroom, which shows every theme in light and dark and renders every component in any of them.

The admin portal has the same showroom at /themes, with a button to switch the product's theme when the config allows it.

By default people can switch between light and dark only. Turn on userCanChangeTheme or userCanCustomize to let them pick a theme or a brand color.

Making your ownCopy Anchor Link

A theme is one CSS file in packages/design/themes/, setting the same tokens under [data-theme='yourbrand'] and its dark variant:

[data-theme='yourbrand'] {
  --radius: 0.5rem;
  --background: #ffffff;
  --primary: #7c3aed;
  /* … every token, as in tokens.css */
}
[data-theme='yourbrand'].dark, [data-theme='yourbrand'] .dark { /* dark values */ }

Import it in packages/design/styles.css and add it to packages/ui/src/lib/themes.ts. pnpm test checks the contrast of every theme in both modes.

Components only read tokens (bg-card, text-muted-foreground); a test fails on raw colors in a component.