Tema claro y oscuro

Monta el modo claro y oscuro que arranca en el tema del sistema y no pega el fogonazo blanco al cargar.

Cuándo se usa

Al añadir el selector de tema, o cuando la página parpadee en blanco antes de pintarse.

SKILL.md

# Tema claro y oscuro

Monta o arregla el cambio de tema. El fallo que hay que evitar es el parpadeo:
la página se pinta clara y medio segundo después se vuelve oscura.

## Los tres estados

El tema tiene tres estados, no dos: claro, oscuro y "el del sistema". Este
último es el valor por defecto y no se guarda como claro ni como oscuro, porque
tiene que seguir cambiando si el usuario cambia el ajuste de su ordenador.

## El orden correcto

1. Un script **síncrono** en el head, antes de cualquier hoja de estilos, lee lo
   guardado y pone el atributo en el elemento raíz. Tiene que ser inline y
   bloqueante: si es diferido, el parpadeo vuelve.
2. El CSS define la paleta completa en :root, la redefine bajo
   @media (prefers-color-scheme: dark) y otra vez bajo el atributo explícito,
   para que la elección del usuario gane en los dos sentidos.
3. El botón guarda la elección y, al volver al modo automático, borra la clave
   en lugar de escribir un valor.

## Comprobaciones

- Recargar en oscuro no debe enseñar ni un fotograma claro.
- Cambiar el tema del sistema con la web abierta y en modo automático debe
  cambiarla al vuelo.
- El body necesita color de fondo propio; sin él hereda el del navegador.
- Declara color-scheme para que los controles nativos y las barras de scroll
  acompañen al tema.