Vamos mostrar como adicionar Dark Mode no Blog de maneira rápida e fácil, sem depender do JavaScript, usando apenas o CSS.
Vou trazer um conceito — uma ideia — que vai além de mudar o background do fundo da tela e as cores dos textos, que é o padrão. Vamos escurecer um pouco as imagens também.
O usuário quer ler um conteúdo com tema escuro, então a imagem do conteúdo precisa se adequar e ter menos brilho.
Na verdade teremos uma única dependência: o Navegador (browser).
Os navegadores modernos trazem a opção de configurar a aparência para dark 🌑 light 🌕 ou seguir as preferências já definidas no tema que o usuário escolheu no Sistema Operacional. 🌗
Sem nenhum código JavaScript e com pouquíssimas linhas de CSS adicionamos Dark Mode no Blog. Ficou bem legal e acabou ficando automático — seguindo a sugestão do navegador ou do sistema operacional do usuário.
Poderia ter um botão switch para usuário trocar o tema: