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.

O que é CSS Dinâmico?

CSS dinâmico é quando os estilos são alterados dinamicamente com base em ações do usuário, condições do sistema, dados, eventos, etc. Isso geralmente é feito com JavaScript, que pode:.
> Adicionar/remover classes.
> Alterar diretamente propriedades de estilo (style).
> Trocar arquivos de CSS.
> Usar variáveis CSS com setProperty.
> Ou combinar tudo isso com interatividade.
.
Ou seja, CSS dinâmico = estilos que mudam em tempo real, não são fixos no arquivo .css.