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

Microsoft está mapeando o planeta inteiro para simulador de voo
Artigos
6 visualizações
Artigos
6 visualizações

Microsoft está mapeando o planeta inteiro para simulador de voo

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

A franquia Flight Simulator está prestes a renascer com um nível de realismo jamais alcançado antes.

Promoções de Jogos do Final de Semana (26/06)
Notícias
13 visualizações
Notícias
13 visualizações

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

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

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

Os 10 melhores plugins de formulário para WordPress em 2020
Artigos
16 visualizações
Artigos
16 visualizações

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

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

Selecionamos as melhores opções para você não ter dor de cabeça em 2020 criando formulários.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Você precisa conhecer Deno
Artigos
19 visualizações
19 visualizações

Você precisa conhecer Deno

Carlos L. A. da Silva - 20 de junho de 2020
Promoções de Jogos do Final de Semana (19/06)
Notícias
19 visualizações
19 visualizações

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

Carlos L. A. da Silva - 19 de junho de 2020
Como verificar a presença de malware no seu site
Dicas
21 visualizações
21 visualizações

Como verificar a presença de malware no seu site

Carlos L. A. da Silva - 18 de junho de 2020
O 5G NÃO ajudou no crescimento da pandemia do coronavírus
Artigos
23 visualizações
23 visualizações

O 5G NÃO ajudou no crescimento da pandemia do coronavírus

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