Theme builder

Pick a seed per intent and the whole page repaints. Export the tokens as CSS, or as a registry preset someone else can install.

Seeds

One hex per intent is all a theme is. The four shades and the label colour are derived from it by wrThemeTokens() — the same function that generates the shipped presets, and the one pnpm check:theme proves against the compiled stylesheet. The tint and ink layer (-soft, -ink, -active) is written in terms of var(), so it re-resolves on its own and no preset needs to carry it.

"Apply" writes the tokens onto <html>, so the preview is the whole site — this page, the header, the sidebar, every component below. A builder that previews into an isolated box can be wrong about the thing you are actually choosing. Reload to drop it.

CSS

Paste into your global stylesheet, after ngwr's own.

/* Move a colour to see its tokens. */

As a registry preset

One JSON file, hosted anywhere — see the registry guide for what a tool does with it.

{
  "$schema": "https://ngwr.dev/registry/schema.json",
  "name": "theme-mine",
  "type": "registry:theme",
  "title": "My theme",
  "description": "Generated with the ngwr theme builder.",
  "ngwr": ">=11",
  "cssVars": {
    "light": {}
  }
}

Only the intents you moved are in there. A preset restating the defaults would fight the next palette change instead of riding it, and the format is explicit that an omitted intent keeps whatever the stylesheet compiled.

See also