# Themes

> Seven presets. Each sets only the brand tokens; neutrals, status colors, spacing and type are shared. Dark and light work in every preset.

| Preset | Brand | Light brand | Vibe |
| --- | --- | --- | --- |
| `entrepta` | #7C6BFF | #6656FF | Default. Violet, playful. |
| `blossom` | #CC2E36 | #B02028 | Cherry red. Bold and confident. |
| `marmalade` | #FF8213 | #E06800 | Warm orange. Editorial and energetic. |
| `julia` | #E85A8A | #CC3A6A | Warm pink. Soft and expressive. |
| `ivy` | #35A365 | #258A50 | Forest green. Calm and grounded. |
| `bosco` | #2563EB | #1D4ED8 | Deep blue. Technical and steady. |
| `taylor` | #FAFAFA | #09090B | Monochrome and flat. White on dark, black on light. |

## Pick one

```bash
npx @entrepta/cli@latest init --theme=ivy
```

## Or install all seven

```bash
npx @entrepta/cli@latest init --theme=ivy --themes=all
```

All seven land under `:root[data-theme="<id>"]`, the chosen one also on bare `:root`. Switch with `data-theme` on `<html>`, or the ThemeSwitcher. Light mode is `data-mode="light"` on `<html>`.

## taylor, flat and monochrome

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.

```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; }
```

## Switching

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.

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

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