Agora que os principais sistemas operacionais móveis possuem opções de “modo noturno” permanentes, um número cada vez maior de usuários e aplicativos estão descobrindo as vantagens do recurso.
Enquanto isso, sua página web continua com fundo branco, sem trazer essa funcionalidade para seus visitantes? Mesmo que você tenha criado duas folhas de estilo CSS para cada cenário, seu usuário ainda precisa ativar um botão, guardar um cookie no navegador, para que sua escolha tenha efeito? Essa troca agora está bastante simples.
Três linhas de código podem alternar entre o modo normal e o modo noturno, desde que você tenha sua folha de estilo preparada para isso no seu servidor e o usuário tenha optado por um modo ou outro nas configurações do seu dispositivo.
Confira o código abaixo:
@media (prefers-color-scheme: dark) {
/* incluir nessa área todos os estilos referentes ao modo noturno */
}
Com essa media-query, o navegador recebe a instrução: “se o dispositivo está com modo noturno ativado, então prevalece esse estilo”. Todas as alterações que você desejar devem estar incluídas dentro das chaves abertas. Para o usuário, a mudança é completamente automática, sem precisar apertar botões ou fazer escolhas. Usuários que não tem o modo noturno ativado verão o site com o visual normal.
De acordo com o Can I use…, o suporte a essa media-query nos navegadores é de mais de 80%. Na pior das hipóteses, o tema noturno será ignorado e o usuário visualizará o site com o estilo declarado posteriormente no resto do CSS.
