Multi-brand theming
Nexus theming is a set of independent dimensions, each a runtime mode you can swap without a rebuild. Components never hard-code a color or a size — they reference semantic tokens, so re-pointing a dimension cascades to the whole tree at once. One source of truth, read the same way by humans and agents.
The dimensions
One base color axis plus five design-token axes and dark mode, each an orthogonal runtime mode that combines freely. Brand color is a separate runtime seed — any hex, resolved by the appearance engine — not a fixed stylesheet; re-theme it via a consumer override (below).
| Dimension | Options | How it swaps |
|---|---|---|
| Base | slate · stone · neutral · gray · zinc | <link> swap |
| Spacing (density) | 6 modes — compact · default · comfortable · … | data-density attr |
| Shadow | 5 modes | <link> swap |
| Radius | square · subtle · smooth · round · extra-round | <link> swap |
| Border width | 3 designs (normal · fine · strong) | <link> swap |
| Dark mode | light · dark | .dark class |
Two runtime mechanisms
Colors and most design tokens swap by re-pointing a stylesheet <link data-theme>— each mode is a small CSS file that redefines the --nx-* variables. Spacing density swaps via a data-density attribute on <html> (so one attribute rescales every nx:p-* utility), and dark mode toggles the .dark class. Because every surface reads the tokens, all three cascade with zero component JavaScript.
See it live
Open the theme picker (bottom-right) and swap the Base — these components and swatches re-resolve instantly.
Re-theme as a consumer
Override the token variables in a stylesheet loaded after Nexus, or set a density mode on any subtree. No component changes — the cascade does the rest. See Consumer overrides for the full surface.
/* loaded after @nexus_ds/tailwind */
:root {
--nx-color-primary-background: oklch(0.55 0.2 145); /* your brand */
}
/* density on a subtree */
<section data-density="compact"> … compact … </section>For agents
The same dimensions are published as structured DTCG tokens, a llms.txt manifest, and a mirror of the authoring rules — so an agent re-themes by reading the source of truth, not by scraping rendered CSS. See For AI agents.