Modo Escuro com Variáveis CSS

Vamos ver agora como usar variáveis CSS personalizadas (custom properties) com JavaScript para criar um modo escuro dinâmico e moderno.
Esse é um dos métodos mais recomendados em projetos profissionais, pois separa bem o estilo do comportamento e facilita mudanças escaláveis.

Vantagens desse método:

- Separação total de lógica (JS) e estilo (CSS).
- Fácil de manter e escalar (você pode ter várias cores personalizadas).
- Permite alternar temas complexos sem alterar elementos individualmente.
- Funciona bem com componentes reutilizáveis e frameworks.

como salvar a preferência do usuário no localStorage, para que o tema fique salvo mesmo se ele atualizar a página.

Vamos adicionar agora o uso de localStorage para salvar a preferência de tema (claro ou escuro), de forma que a escolha do usuário permaneça mesmo ao recarregar a página.

O que é localStorage?
É uma API do navegador que permite salvar dados localmente, mesmo após fechar a aba/página. Resultado:
> Ao marcar o checkbox → ativa modo escuro e salva "escuro" no localStorage.
> Ao desmarcar → volta ao claro e salva "claro".
> Ao recarregar a página → o script lê o valor salvo e aplica automaticamente o tema.