Estilização e Temas CSS

Aprenda a criar interfaces adaptáveis

O que são CSS Variables?

As Custom Properties (variáveis) permitem armazenar valores que podem ser reutilizados em todo o documento. Elas facilitam muito a criação de temas.

--main-color: #ff5733;

Benefícios do Dark Mode

Redução do cansaço visual em ambientes de pouca luz.
Economia de bateria em telas OLED/AMOLED.
Estética moderna e elegante.

Como implementar?

Você pode usar o atributo data-theme no HTML e alternar via JavaScript, ou usar a media query @media (prefers-color-scheme: dark) para detectar a preferência do sistema do usuário.