---
title: Theming
description: The token system the styled components paint against, and the CSS to copy.
---

The styled components paint against a small set of semantic tokens. Copy the
token CSS into your global stylesheet once and every component reads it. The
headless package has no styling of its own, so this only matters if you use the
styled components.

## The token model

Four **seeds** drive everything:

```css
:root {
  --bg: #ffffff;   /* canvas */
  --fg: #1a1a1a;   /* ink */
  --acc: #0169cc;  /* accent */
  --con: 0.3;      /* contrast — how far surfaces and states step from bg */
}
```

Every other token derives from those with `oklch(from … calc(…))`: the surface
tiers (`--primary`, `--tertiary`, `--base`), their `-hover`/`-active`/`-border`
states, the accent chain, and the ink tiers. Because the derivations reference
the seeds, **dark mode is just a different set of seeds** — the `.dark` block
re-seeds `--bg`/`--fg`/`--acc` and flips the state-delta signs, and every derived
value recomputes. Tune the whole system by changing four values.

## Copy the tokens

Paste this into your `globals.css` (after `@import "tailwindcss"`). It defines
the seeds, the derived tokens, the `@theme inline` mappings, and the `.dark`
overrides:

<ThemeSource />

The `@source` line keeps Tailwind scanning the `streamdown` package for classes;
drop it if you don't render markdown. Adjust the four seeds to rebrand.