Getting started

Theming

Curio ships with a neutral look. Eight CSS variables turn it into yours.

Tokens

These are the defaults, shown in the current theme:

--curio-bgPage background (used for cut-outs like the record’s hole)

--curio-fgMain text

--curio-mutedSecondary text, labels, ticks

--curio-surfaceCards, popovers, panels

--curio-borderHairlines and outlines

--curio-chipChips and quiet fills

--curio-accentThe one colour that stands out

--curio-on-accentText on top of the accent

Make it match your site

Override the variables anywhere after curio.css:

app/globals.css

:root {
  --curio-bg: #fff8f1;
  --curio-accent: #ea580c;
}

Dark mode

Dark values apply inside any element with class="dark" or data-theme="dark", so curio works with next-themes and most theme setups out of the box. The maps switch to dark tiles automatically.

.dark {
  --curio-bg: #0b0b0f;
  --curio-accent: #a78bfa;
}

Per section

Tokens are plain CSS variables, so you can scope them. The shelf on the homepage re-themes only itself by setting the variables inline on its wrapper.

Motion

Every animation lives in curio.css and is turned off for visitors who ask for reduced motion. The one exception is the record’s slow spin, which you can stop with alwaysSpin={false}.