Seven themes. One brand token.

Each preset sets only the brand: --fg-brand, its hover, its two measured inks, the tint and the focus ring. Everything else (zinc neutrals, status colors, spacing, type) is shared.

view .md

Available themes

7 presets

entrepta#7C6BFF

Default. Violet, playful.

--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

taylor#FAFAFA

Monochrome and flat. White on dark, black on light.

--theme=taylor#FAFAFA

What changes per theme

6 tokens

styles/themes/entrepta.css

css

:root {
  --fg-brand:         #7c6bff;  /* fills, borders, glyphs, large text */
  --fg-brand-hover:   #9b8eff;
  --fg-on-brand:      #09090b;  /* text on a brand fill */
  --fg-brand-text:    #9b8eff;  /* brand-colored text */
  --bg-surface-brand: rgba(124, 107, 255, 0.15);
  --ring:             rgba(124, 107, 255, 0.5);
}

Each preset is one block of CSS variables per mode. The two inks are set per theme because no single one reads on all seven brands. Every pair clears WCAG AA in both modes.

taylor, flat and monochrome

2 knobs

taylor has no hue. Its brand is white on dark and black on light, so there is no brand glow: a card and an overlay lose the light in their top-left corner. That light is one number, --finish-glow, from 0 to 1. Any theme can set it, and a project can set it once for all of them. The charts keep their color. White has nothing to turn, so --chart-from names the hue they start from. In taylor the brand ink is the primary ink, so a state is never shown by brand color alone.

styles/themes/taylor.css

css

:root {
  --fg-brand: #fafafa;
  --fg-brand-text: #fafafa;
  --finish-glow: 0;          /* 0 is flat, 1 is the full finish */
  --chart-from: #3b82f6;     /* where the chart colors start turning */
}

/* keep the glow, drop the hue: */
:root { --finish-glow: 0.5; }

One theme or all seven

2 ways

terminal

bash

# one fixed theme
npx @entrepta/cli@latest init --theme=ivy

# all seven, switchable at runtime
npx @entrepta/cli@latest init --theme=ivy --themes=all

With --themes=all, each theme lives under data-theme on <html>, and the one you picked is the default. Add the theme-switcher component to let people choose.

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. Dark surfaces (the CodeBlock terminal variant) 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 let people toggle it, add the mode-toggle component. It stores the choice, and its ModeScript sets the attribute before the page paints.

Switching

1 frame

A switch lands all at once. For its length, the hooks hold every transition, so no component eases into the new colors on its own clock. Where the browser has view transitions, the old and new page crossfade as one picture. With reduced motion, the switch is instant. If you set the attributes yourself, wrap the change in transitionTheme.

theme.ts

import { transitionTheme } from "@/hooks/use-mode"

transitionTheme(() => {
  document.documentElement.setAttribute("data-theme", "ivy")
})