The blue

This is a placeholder post while I figure out what I actually want to write here. For now, a few notes on the site itself, since it doubles as a demo of the components I have to work with.

The whole thing is one color and its neighbors. The anchor is Dodger Blue, and the gradient runs from there into indigo. Drag the slider to see the range it covers.

The gradient only ever shows up as light: card edges, the rule under this footer, the generated share images. It never sits behind text, and the name in the corner is a flat blue, no glow.

Two themes, one set of tokens

Light and dark are not two designs. They are one set of named tokens with two value tables; the toggle just swaps which table is live.

:root {
    --bg: #fcfdff;
    --on-surface: #0e1726;
    --primary: #0b66d8;
}
[data-theme="dark"] {
    --bg: #0a0f1a;
    --on-surface: #e9edf5;
    --primary: #5fb0ff;
}

Picking the theme on load

1. Check for a saved choice in storage.
2. If there isn't one, follow whatever the operating system prefers.
3. Set it before the page paints, so there's no flash of the wrong theme.

That's the entire trick. Nothing here is clever; it's just kept small on purpose.

Real writing later. For now, this is mostly an excuse to make sure the figures, code blocks, callouts, and that slider all render the way I want.