Theming

Capsa ships four theme styles, each with light and dark modes:

Users switch via the gear menu in the top bar (mode + style).

Pin a theme for your brand

For a single-brand site, lock one style and hide the switcher:

VITE_DEFAULT_THEME_STYLE=steel

Mode (light/dark/system) still works; only the style picker is hidden.

How theming works

Colors are theme tokens, never hardcoded hex. Components reference tokens like $accent, $color10, $borderColor (resolved at runtime via Tamagui), so switching themes recolors the whole UI — including code blocks, callouts, and the command palette.

Themes live in src/theme/themes.ts and are registered in src/theme/themeController.tsx.

Add a brand theme

The fastest path is to clone an existing style and recolor it.

1. Copy a preset block in themes.ts — the steel block is a good neutral starting point. Duplicate its palette and semantic-color objects, renaming steel* → brand*:

   TypeScript

   const brandLightPalette = [ /* 12 cool-to-dark steps */ ];
   const brandDarkPalette  = [ /* 12 dark-to-light steps */ ];
   const brandSemanticColorsLight = { accent: '#7c3aed', /* ...~50 tokens */ };
   const brandSemanticColorsDark  = { accent: '#a78bfa', /* ... */ };
   

2. Register it in the childrenThemes of the createThemes({...}) call:

   TypeScript

   brand: {
     palette: { light: brandLightPalette, dark: brandDarkPalette },
     extra: {
       light: { ...extraColors, ...brandSemanticColorsLight },
       dark:  { ...extraColors, ...brandSemanticColorsDark },
     },
   },
   

3. Register the name in src/theme/themeController.tsx — add 'brand' to the ThemeStyle union and the THEME_STYLES array (the Tamagui theme names derive from those automatically) — and to the styles array in the pre-hydration script in index.html, so the theme applies before first paint with no flash.

4. List it in the style switcher — styleOptions in src/components/layout/TopNav.tsx.

5. Pin it with VITE_DEFAULT_THEME_STYLE=brand.

Fonts

The body/heading font is Space Grotesk, loaded and configured entirely in src/theme/fonts.ts (the @fontsource weight imports live there too). Swap it by changing that one file — import your font's weight files and update createFont.