0 Compartilhamentos 98 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

Promoções de Jogos do Final de Semana (18/09)
Notícias
5 visualizações
Notícias
5 visualizações

Promoções de Jogos do Final de Semana (18/09)

Carlos L. A. da Silva - 18 de setembro de 2020

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

O que você precisa saber sobre o Pix
Artigos
14 visualizações
Artigos
14 visualizações

O que você precisa saber sobre o Pix

Carlos L. A. da Silva - 16 de setembro de 2020

Será o fim de DOCs, TEDs e transferências? Novo modelo de pagamento eletrônico proposto pelo Banco Central está prestes a entrar em funcionamento.

Como centralizar no CSS de forma definitiva
Dicas
16 visualizações
Dicas
16 visualizações

Como centralizar no CSS de forma definitiva

Carlos L. A. da Silva - 12 de setembro de 2020

O cálice sagrado do layout já foi encontrado tem tempo. Você já conhecia o poder do Flexbox?

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (11/09)
Notícias
20 visualizações
20 visualizações

Promoções de Jogos do Final de Semana (11/09)

Carlos L. A. da Silva - 11 de setembro de 2020
Esse artigo foi escrito por um robô
Artigos
18 visualizações
18 visualizações

Esse artigo foi escrito por um robô

Carlos L. A. da Silva - 9 de setembro de 2020
Home Booth? Você quase trabalhou em um desses…
Artigos
30 visualizações
30 visualizações

Home Booth? Você quase trabalhou em um desses…

Carlos L. A. da Silva - 5 de setembro de 2020
Promoções de Jogos do Final de Semana (04/09)
Notícias
28 visualizações
28 visualizações

Promoções de Jogos do Final de Semana (04/09)

Carlos L. A. da Silva - 4 de setembro de 2020