Every visual decision is a CSS custom property generated from W3C design tokens. Components only use semantic tokens such as --nui-color-accent-solid, so changing one token restyles every component that uses it.
Light and dark
The operating system’s preference picks the mode by default. Pin a mode on any element with data-nui-theme, and nest them freely.
<html data-nui-theme="dark">
<!-- Everything here is dark… -->
<aside data-nui-theme="light">…except this panel.</aside>
</html>data-nui-theme="light"data-nui-theme="dark"Override tokens
Tokens live in @layer nui, so plain CSS in your app overrides them. Set them on :root for the whole app, or on any element for one part of it.
/* The whole app */
:root {
--nui-color-accent-solid: oklch(0.52 0.16 150);
--nui-radius-md: 0.75rem;
}
/* One part of it */
.checkout {
--nui-color-accent-solid: var(--nui-color-success-solid);
}A brand palette
The color scales are generated. Change a hue in packages/tokens/scripts/palette.ts and regenerate: the script refits every color to sRGB and re-checks the contrast of each text and background pair.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens