0 Compartilhamentos 44 Views

Como criar um “modo noturno” para seu site

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:

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.

Carregando...

Você pode se interessar

Conheça Silq: a primeira linguagem criada para popularizar a programação quântica
Artigos
6 visualizações
Artigos
6 visualizações

Conheça Silq: a primeira linguagem criada para popularizar a programação quântica

Carlos L. A. da Silva - 6 de julho de 2020

Time de quatro pesquisadores do Instituto Federal de Tecnologia (ETH) de Zurique, na Suíça, quebrou paradigmas e está prestes a escancarar as portas da computação quântica.

Promoções de Jogos do Final de Semana (03/07)
Notícias
15 visualizações
Notícias
15 visualizações

Promoções de Jogos do Final de Semana (03/07)

Carlos L. A. da Silva - 3 de julho de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Como plugar um dispositivo USB corretamente… de primeira!
Dicas
17 visualizações
Dicas
17 visualizações

Como plugar um dispositivo USB corretamente… de primeira!

Carlos L. A. da Silva - 3 de julho de 2020

Impossível? Feitiçaria? A resposta estava bem diante de nossos olhos todo esse tempo...

Deixe um Comentário

Your email address will not be published.

Mais publicações

Microsoft está mapeando o planeta inteiro para simulador de voo
Artigos
21 visualizações
21 visualizações
Promoções de Jogos do Final de Semana (26/06)
Notícias
22 visualizações
22 visualizações

Promoções de Jogos do Final de Semana (26/06)

Carlos L. A. da Silva - 26 de junho de 2020
Os 10 melhores plugins de formulário para WordPress em 2020
Artigos
23 visualizações
23 visualizações

Os 10 melhores plugins de formulário para WordPress em 2020

Carlos L. A. da Silva - 26 de junho de 2020
Você precisa conhecer Deno
Artigos
25 visualizações
25 visualizações

Você precisa conhecer Deno

Carlos L. A. da Silva - 20 de junho de 2020