Theme builder

Every component here reads Material Design 3 colour roles (--md-sys-color-*). Pick your brand colours and the whole palette is generated for the light and the dark scheme with Google's own Material Design 3 colour algorithm. Adjust any role by hand, then download the CSS or copy the config for this registry.

Seeds

Primary

Secondary

Tertiary · derived from the primary

Neutral · surfaces follow the primary

SchemeContrastPreview on this site

Preview

light scheme

Three items ship tomorrow. Primary text sits on the surface; secondary and tertiary accents carry the badges.

StableBetaDeprecatedError

dark scheme

Three items ship tomorrow. Primary text sits on the surface; secondary and tertiary accents carry the badges.

StableBetaDeprecatedError

Colour roles

Click a swatch to set that role by hand; × restores the generated value. Light and dark are edited separately.

Role	Light	Dark
`--md-sys-color-primary`	`#64558f`	`#cebdfe`
`--md-sys-color-on-primary`	`#ffffff`	`#35275d`
`--md-sys-color-primary-container`	`#e8ddff`	`#4c3e76`
`--md-sys-color-on-primary-container`	`#4c3e76`	`#e8ddff`
`--md-sys-color-secondary`	`#246d00`	`#6de03c`
`--md-sys-color-on-secondary`	`#ffffff`	`#0f3900`
`--md-sys-color-secondary-container`	`#88fd56`	`#195200`
`--md-sys-color-on-secondary-container`	`#195200`	`#88fd56`
`--md-sys-color-tertiary`	`#7d5261`	`#efb8c9`
`--md-sys-color-on-tertiary`	`#ffffff`	`#492532`
`--md-sys-color-tertiary-container`	`#ffd9e3`	`#633b49`
`--md-sys-color-on-tertiary-container`	`#633b49`	`#ffd9e3`
`--md-sys-color-error`	`#ba1a1a`	`#ffb4ab`
`--md-sys-color-on-error`	`#ffffff`	`#690005`
`--md-sys-color-error-container`	`#ffdad6`	`#93000a`
`--md-sys-color-on-error-container`	`#93000a`	`#ffdad6`
`--md-sys-color-background`	`#fdf7ff`	`#141218`
`--md-sys-color-on-background`	`#1c1b20`	`#e6e1e9`
`--md-sys-color-surface`	`#fdf7ff`	`#141218`
`--md-sys-color-on-surface`	`#1c1b20`	`#e6e1e9`
`--md-sys-color-surface-variant`	`#e6e0ec`	`#48454e`
`--md-sys-color-on-surface-variant`	`#48454e`	`#cac4cf`
`--md-sys-color-surface-dim`	`#ded8e0`	`#141218`
`--md-sys-color-surface-bright`	`#fdf7ff`	`#3b383e`
`--md-sys-color-surface-container-lowest`	`#ffffff`	`#0f0d13`
`--md-sys-color-surface-container-low`	`#f8f2fa`	`#1c1b20`
`--md-sys-color-surface-container`	`#f2ecf4`	`#211f24`
`--md-sys-color-surface-container-high`	`#ece6ee`	`#2b292f`
`--md-sys-color-surface-container-highest`	`#e6e1e9`	`#36343a`
`--md-sys-color-outline`	`#79757f`	`#938f99`
`--md-sys-color-outline-variant`	`#cac4cf`	`#48454e`
`--md-sys-color-inverse-surface`	`#322f35`	`#e6e1e9`
`--md-sys-color-inverse-on-surface`	`#f5eff7`	`#322f35`
`--md-sys-color-inverse-primary`	`#cebdfe`	`#64558f`
`--md-sys-color-scrim`	`#000000`	`#000000`
`--md-sys-color-shadow`	`#000000`	`#000000`

Every text role reaches 4.5:1 on its background in both schemes.

Use it

In this registry. Paste the config block into registry.config.json under site and rebuild: the site regenerates exactly this CSS. Roles you edited by hand travel in overrides.
In your app. Import the token sheet first, then theme.css: the sheet defines every --md-sys-* property and this file overrides the colour roles, so every component on the page re-themes.
Choosing a scheme. Do nothing and the visitor's OS preference picks light or dark. Set data-theme="light" or data-theme="dark" on <html> to force one; the file carries both.