Light and dark theme

Sets up light and dark mode that starts on the system theme and never flashes white on load.

Cuándo se usa

When adding the theme switch, or when the page flashes light before painting.

SKILL.md

# Light and dark theme

Build or fix theme switching. The failure to avoid is the flash: the page paints
light and half a second later turns dark.

## The three states

A theme has three states, not two: light, dark and "whatever the system says".
That last one is the default and must not be stored as light or dark, because it
has to keep following the user's OS setting.

## The right order

1. A **synchronous** script in the head, before any stylesheet, reads the stored
   value and sets the attribute on the root element. It must be inline and
   blocking: deferred brings the flash back.
2. The CSS defines the full palette on :root, redefines it under
   @media (prefers-color-scheme: dark), and again under the explicit attribute,
   so the user choice wins in both directions.
3. The button stores the choice and, when going back to automatic, deletes the
   key instead of writing a value.

## Checks

- Reloading in dark must not show a single light frame.
- Changing the OS theme while the page is open and set to automatic must switch
  it live.
- The body needs its own background colour; without it the browser's shows through.
- Declare color-scheme so native controls and scrollbars follow the theme.