Theming

Tokens first

tokens.css defines the --detent-* custom properties every component reads. Set them on :root to re-theme the whole catalog.

:root {
  --detent-color-accent: #6d28d9;
  --detent-color-accent-text: #ffffff;
  --detent-radius-md: 0.25rem;
  --detent-font-sans: 'Inter', system-ui, sans-serif;
}

The token file also ships a dark scheme. Choose it with an attribute on the root element; the site's own theme switcher uses the same hook:

<html data-detent-theme="dark">

With no explicit attribute, prefers-color-scheme decides. An explicit value wins over the media query in both directions.

Per-component properties, then parts

When a token is too broad, a component exposes its own custom properties. Read them from the component's page; the button, for example, accepts --detent-button-radius, --detent-button-gap and --detent-button-font-weight.

detent-button {
  --detent-button-radius: 999px;
  --detent-button-gap: 0.5rem;
}

For structure rather than values, style documented parts:

detent-button::part(button) {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Parts are the only supported way into the shadow tree. Internal class names are not API and can change between builds.

One worked re-theme

:root {
  --detent-color-accent: #0f766e;
  --detent-color-accent-text: #ffffff;
  --detent-radius-md: 0.75rem;
}

detent-button {
  --detent-button-font-weight: 600;
}

detent-button::part(spinner) {
  border-width: 2px;
}

That is the whole contract: tokens, per-component properties, documented parts. No theme provider component, no CSS-in-JS runtime.