Light and dark from the same tokens
Surfaces, text, buttons, and links read CSS variables. The theme switch flips one attribute on the root. Component colors are gone.
The site palette is black, white, button tan #A5916E, and link blue #59B8F2. Those values live in tokens, not in component files. The dark theme overrides the same names. A button that hardcoded a shade drifted from the rest of the UI and disappeared in dark mode. After the cleanup that is one token edit.
Open Sans is the face. Interactive elements still move on hover, focus, and press. The motion is short and sits on --motion-fast. Reduced motion keeps the color change and drops the transform.
What the switch does
The toggle writes data-theme on the root. Every surface, border, and text color follows. A component that still needs a media query is a bug in the token map. That is the check when a new screen looks wrong in one theme.
About twenty hardcoded values came out. Two buttons differed by one shade. A border used a color that did not exist in dark mode. Both were token bugs, not layout bugs.
What stays out
No gradients on chrome. No glow. No extra fonts. News covers are photos and go grayscale in the tile. Diagrams in articles invert in dark mode because they are black strokes on a transparent field.
New UI reads the tokens. If a color is not in the map, it does not ship.