Index › Themes
the theming system
Two layers.
Every surface in the product is two layers composed — a light/dark mode times a color scheme — over one semantic token contract. Schemes aren't hand-painted: a per-scheme palette of primitives is run through the generator (build-themes.mjs) into the contract, the intent tier, and a shadcn bridge — emitting the CSS the components read and the Figma variables design works from, from one source.
Light and dark, switched at runtime. This book renders Lumos in light; the same tokens carry the dark surface.
The palette layer — swap it and the whole product re-skins. Fifteen schemes ship today; Lumos is one of them.
--bg-canvas, --fg-primary, --accent, the intent tier, all bound. Components stay scheme-agnostic.
A per-scheme set of primitive ramps (Lumos ships ten, each ten steps) — brand, ink, neutral, and warm status ramps. The one hand-authored input.
Every scheme binds the same alias contract — --bg-canvas … --accent — plus the 30-token intent tier and the shadcn bridge the components read.
One run emits tokens.generated.css for both modes and {scheme}.figma.json — code and Figma variables from the same source, never re-typed.
Components read the bound tokens through the shadcn vocabulary. Build against the names, not the colors — the surface re-skins with no component edit.
Scheme Gallery
01Every shipped scheme by its real signature colors — one contract, many faces. Lumos sits among them.
Light & Dark
02The mode layer in full — the same Lumos surface rendered light and dark, token for token, side by side.
How Lumos Was Made
03This book’s own scheme, traced end to end — incumbent accent in, primitives synthesized, contract bound, baked.
