Theme editor

Settings → Appearance is a live theme editor. Every control applies immediately to the whole app — colors re-resolve through Nuxt UI's semantic tokens, radius and font are set on the document root, and dark/light flips the color mode. There is no save button.

Each change persists three ways at once:

• a tick-theme cookie, so the server renders your saved theme on the first byte — no flash of the wrong mode before hydration;
• localStorage, as a same-origin mirror;
• your user row on the server (PATCH /api/me/theme → users.theme), so the theme follows you to another browser and is re-applied on login.

Presets

Twelve presets, in two rows. They are starting points — every control below still applies on top, and the moment you diverge the label reads Custom.

Tick presets:

A second row, labelled From the Nuxt UI theme studio, carries seven presets adapted from the Nuxt UI Theme Studio: Iris, Crimson, Coral, Mint, Cobalt, Sunset and Bubblegum. They are approximations — where the original used a font or a custom hue Tick does not ship, the nearest available one is substituted.

Primary color

Seventeen swatches — the full Tailwind chromatic palette in spectrum order: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Picking one rewrites ui.colors.primary, so every accent in the app (buttons, chips, charts, the timer glow) re-resolves instantly.

Neutral palette

Nine options: the classic five (slate, zinc, stone, gray, neutral) plus the four tinted neutrals Tailwind v4 added — mauve, taupe, mist, olive — each swatch split light/dark so you can see its undertone.

Radius, mode, font, sidebar

• Radius: None / Sm / Md / Lg / Xl — the base corner radius in px (0 / 2 / 4 / 6 / 8) that every component's radii scale from.
• Mode: Dark / Light.
• Font: Inter, DM Sans, IBM Plex Sans, Manrope, Source Sans 3 — each row renders in its own face with a 2h 30m numeral sample.
• Sidebar: Starfield / Plain. The starfield is a subtle field of dots behind the sidebar; it only shows in dark mode.

Sample and config

The right column is sticky: a live sample card (timer bar, button variants, input, bars, and the primary 100–900 ramp) re-renders with every change, above the generated app.config.ts snippet. The page header has Reset (back to Nocturne) and Copy app.config.ts — useful if you want to hard-code your theme into a fork.