Six themes. One brand token.

Each preset overrides three CSS variables: --fg-brand, --fg-brand-hover and --bg-surface-brand. Everything else (zinc neutrals, status colors, spacing, type) is shared.

Available themes

6 presets

entrepta#7C6BFF

Default. Violet, playful, IDE personality.

--theme=entrepta#7C6BFF

blossom#CC2E36

Cherry red. Bold and confident.

--theme=blossom#CC2E36

marmalade#FF8213

Warm orange. Editorial and energetic.

--theme=marmalade#FF8213

julia#E85A8A

Warm pink. Soft and expressive.

--theme=julia#E85A8A

ivy#35A365

Forest green. Calm and grounded.

--theme=ivy#35A365

bosco#2563EB

Deep blue. Technical and steady.

--theme=bosco#2563EB

What changes per theme

3 tokens

entrepta theme

css

:root {
  --fg-brand:         #7C6BFF;
  --fg-brand-hover:   #9B8EFF;
  --bg-surface-brand: rgba(124, 107, 255, 0.15);
}

// Each preset is a single block of CSS variables. To switch, copy the contents of styles/themes/blossom.css (or any preset) into the same place in app/globals.css. Existing components pick up the new brand color on next page load.

Dark or light

2 modes

Every theme works in both dark and light mode. Dark is the default (no attribute needed). Light mode is opted into by setting data-mode="light" on <html>. Surface, foreground and border tokens flip; the brand color shifts slightly darker to keep AA contrast on white. Terminal-style surfaces (CodeBlock, Card variant="terminal", Tooltip) stay dark in both modes by carrying data-surface="dark" internally.

app/layout.tsx

tsx

<html lang="en" data-theme="entrepta" data-mode="light">
  ...
</html>

// To make it user-toggleable, mirror the docs site: persist the choice in localStorage and run a tiny inline script before hydration that reads it and sets the attribute. The full implementation is in apps/docs/components/theme-switcher.tsx and theme-init-script.tsx.