Theming
A theme changes the accent color. Everything else stays fixed.
The rule
themes.css may contain only two variables:
html[data-accent='ocean'] {
--cds-accent: #4a6fa5;
--cds-accent-foreground: #ffffff;
}Hover, soft backgrounds, accent text and focus rings are all derived from --cds-accent with color-mix(). Run node scripts/check-themes.mjs before building — any other variable fails the check.
Built-in themes
| Theme | Light | Dark |
|---|---|---|
| Clay (default) | #d97757 | #cc6b49 |
| Ocean | #4a6fa5 | #6b8fc4 |
| Moss | #5f7f4f | #7f9f6c |
| Plum | #8a5a83 | #a97ba2 |
| Ink | #3d3d3a | #e5e4df |
Use the palette button in the top right to switch — the whole docs site follows.