Como Implementar o Modo Noturno em Seu Site com apenas 3 linhas de CSS

Como criar um "modo noturno" para seu site 🌙

Os principais sistemas operacionais móveis, como o iOS, o Android e o Windows, já possuem opções de modo noturno. Isso significa que cada vez mais pessoas estão usando sites e aplicativos com fundo escuro.

Como oferecer o modo noturno no seu site ? 🌐

Antes, era preciso criar duas folhas de estilo CSS, uma para o modo normal e outra para o modo noturno. Isso exigia que o usuário clicasse em um botão ou configurasse um cookie no navegador para ativar o modo noturno. Mas agora, é possível alternar entre o modo normal e o modo noturno com apenas três linhas de código!

O segredo é usar a media query prefers-color-scheme.

Como funciona ? 

Quando o navegador detecta que o dispositivo do usuário está com o modo noturno ativado, ele aplica as regras de estilo definidas dentro da media query prefers-color-scheme: dark.

Por exemplo, podemos usar a media query para alterar a cor de fundo do nosso site:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }
}

Com esse código, o fundo do nosso site ficará preto quando o modo noturno estiver ativado.

Outras alterações que podemos fazer incluem:

• Alterar a cor do texto
• Alterar a cor das bordas
• Alterar a cor dos ícones

Quais navegadores suportam ?

De acordo com o caniuse.com: https://caniuse.com/prefers-color-scheme, a media query prefers-color-scheme é suportada por quase todos os navegadores modernos, incluindo:

• Chrome
• Firefox
• Edge
• Safari
• Opera

No nosso blog, a CodeBR, já implementamos o modo noturno. Você pode encontrar esse código inspecionando o HTML do site.

Conclusão 🌃

Adicionar o modo noturno ao seu site é uma ótima maneira de melhorar a experiência do usuário, especialmente para pessoas que usam o celular à noite. Com apenas três linhas de código, você pode oferecer essa funcionalidade aos seus visitantes.

Ficou com alguma dúvida? Deixe um comentário!