var(--name) references. Not one of them is a literal hex value. Click the button above and watch the entire page re-skin from one line of JavaScript changing one attribute.This hero, like every other element on this page, reads its color entirely from whichever file is linked above. The class names never change — only the values behind them do.
This callout is the same recipe used on living-styleguide-teaching-elements.html — a left-border box with an uppercase label. Nothing about its markup or class names is different here.
const link = document.getElementById('colorFile');
link.href = link.href.includes('light')
? 'colors-dark.css'
: 'colors-light.css';
// that's the entire swap. no class names touched.
colors-light.css and colors-dark.css declare the identical set of 34 token names. Every color reference on this page — and on the other 21 pages that now link colors-light.css — goes through one of those names, never a literal hex. That's the whole mechanism. No component framework, no build step, no class-name rewrite.