Theming
One file for all the important values - theme.css. Load after ncss.css, override the values in it directly, don't touch any other file.
Including it
<link rel="stylesheet" href="ncss.css">
<link rel="stylesheet" href="theme.css">Works without @layer/!important: theme.css is deliberately UNLAYERED, and unlayered CSS always wins against any layered rule per spec (see Architecture) - a simple :root { --ncss-color-brand: ... } is enough.
Only seed values, no derivations
theme.css contains only the BASE/SEED values (brand colors, base surfaces, fonts, radii, shadows, motion), not the color scales derived from them. Colors like --ncss-color-brand-100/-300/-700/-900 are computed automatically from EXACTLY ONE base value via color-mix() - changing the brand color in theme.css is enough, the whole scale (light/dark steps, "on-soft" text color, Web Awesome bridge) follows automatically.
Automatic derivation only works when applied on :root. If the same seed value is instead overridden locally on a single element ONLY, only rules that directly reference the seed follow along - the derived scale stays at the old value, because it's computed only once on :root and inherited as a finished value.
Multiple themes in parallel
Repeat the same setup in another file (e.g. theme-sunset.css) and load it instead of theme.css as needed - or use the [data-palette] convention in colors.css for a purely attribute-driven switch with no second file at all: <html data-palette="sunset">.
Page transitions (opt-in)
Smooth transitions between page navigations - its own, likewise opt-in file: page-transitions.css.
<link rel="stylesheet" href="ncss.css">
<link rel="stylesheet" href="page-transitions.css">Pure CSS (@view-transition { navigation: auto; }), no JavaScript needed. Currently not Baseline (Chromium family) - no effect on older browsers, an unknown @-rule is simply ignored during parsing, no @supports needed. Four presets are included: cross-fade (default), slide, zoom, wipe - enabled via the types descriptor.
Known console message in some browsers (not an ncss bug, currently mainly WebKit/Safari during back/forward navigation while a transition is running): "AbortError: Skipping view transition because skipTransition() was called" - expected per spec, the navigation itself still works normally. Optional companion that only suppresses this console message: <script src="js/page-transitions-quiet.js" defer></script>.