Dark mode só com variáveis CSS

Custom properties tornam o tema um mapa de tokens:

:root { --bg: #fff; --text: #111; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; }
}

Depois, componentes só consomem var(--bg) e var(--text). Para um toggle manual, você troca uma classe no <html> e redefine as mesmas variáveis.

Veja o exemplo ao vivo: Dark mode com variáveis e o snippet correspondente em Snippets.