# 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. Source: https://ngwr.dev/guides/tokens/builder ## 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 ``, 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. ```scss /* 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. ```typescript { "$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](https://ngwr.dev/guides/registry) is explicit that an omitted intent keeps whatever the stylesheet compiled. ## See also - [Colour tokens](https://ngwr.dev/guides/tokens/colors) — Every `--wr-color-*` the layer defines, and which role each one plays. - [Registry](https://ngwr.dev/guides/registry) — The format the exported preset is written in, and how someone else installs it. - [Theming](https://ngwr.dev/guides/theming) — `provideWrTheme()`, the `data-theme` attribute, and how the two token sets swap.