Os navegadores estão trazendo o modo escuro automático para sites

Logotipo do Chrome sobre um fundo escuro com nuvens de fumaça de gelo seco.
nalyvme / Shutterstock.com

O modo escuro agora está em todos os lugares, incluindo no iOS 13 e Android 10. Navegadores da web como Chrome, Firefox, Safari e Edge também adotaram o modo escuro. Agora, os navegadores estão trazendo o modo escuro automático para sites, graças a um recurso chamado prefere-color-scheme.

Os sites agora podem detectar o modo escuro como os aplicativos podem

Site do YouTube com o tema escuro ativado

Alguns sites oferecem modos escuros hoje. Por exemplo, você pode ativar o modo escuro no YouTube , Twitter ou Slack com apenas alguns cliques. Isso é muito legal, mas quem deseja habilitar essa opção separadamente cada vez que visitar um novo site?

Quando você ativa o modo escuro no Windows 10, macOS, iOS ou Android, todos os aplicativos que você usa sabem que você ativou o modo escuro e podem ativá-lo automaticamente. O Google Chrome nem mesmo tem uma opção de modo escuro de fácil acesso . O Chrome se ajusta automaticamente com base na escolha geral do seu sistema operacional.

No passado, não havia uma maneira de os sites implementarem automaticamente o modo escuro. Mesmo se a interface do seu navegador ficar escura, os sites continuarão usando seus planos de fundo brilhantes. Você deve habilitar manualmente o modo escuro ou usar uma extensão do navegador que force o modo escuro.

Não eram falhas dos desenvolvedores da web – eles não tinham como detectar se o modo escuro estava ativado em seu dispositivo. Isso mudou com um novo recurso de folhas de estilo em cascata (CSS) que os sites podem aproveitar.

Já está em um navegador perto de você

Ativando o modo escuro no aplicativo Configurações do Windows 10

A resposta para esse problema é prefere-color-scheme , um recurso CSS que os sites podem usar para perguntar ao seu navegador se o modo escuro está ativado. Uma página da web pode usar um tema diferente, dependendo se você tem o modo escuro ativado ou desativado.

Este recurso foi adicionado recentemente a navegadores da web modernos em 2019.

  • O Google Chrome para todas as plataformas (incluindo Android) tem suporte desde o Chrome 76 , lançado em 30 de julho.
  • O Safari para iPhone e iPad inclui o Safari 13 como parte do iOS 13 em 19 de setembro.
  • O Mozilla Firefox oferece suporte a ele desde o Firefox 67, lançado em 21 de maio.
  • O Safari para Mac tem suporte desde o Safari 12.1, lançado em 5 de abril.
  • O Microsoft Edge não oferece suporte, mas o novo navegador Edge baseado em Chromium sim.

Esta não é uma opção que você seleciona em seu navegador. Basta escolher entre os modos claro e escuro em seu sistema operacional, seu navegador obedecerá à mudança e os sites podem acompanhar e ativar automaticamente o modo escuro, se quiserem.

Então, onde estão os sites do Modo escuro?

Embora esse recurso esteja ativo hoje e funcionando em todos os navegadores populares, ele é muito novo. O modo escuro chega ao iPhone e iPad com o novo  iOS 13 . No lado Android, apenas telefones Android com o novo Android 10 têm suporte para o modo escuro. Até mesmo o Google Chrome no desktop oferece suporte ao esquema de cores preferenciais por apenas algumas semanas.

É tão novo. Você provavelmente ainda não encontrará muitos sites que usam o esquema de cores preferenciais para ativar automaticamente o modo escuro.

Esperançosamente, isso mudará no futuro. Os sites agora podem respeitar sua preferência de modo escuro e segui-la automaticamente. Os desenvolvedores da Web têm uma nova opção da qual podem aproveitar.

Amamos o modo escuro . Agora que é uma opção em todos os sistemas operacionais mais recentes, ficaremos animados em vê-lo se espalhar pela web.

RELACIONADO: o modo escuro não é melhor para você, mas adoramos isso de qualquer maneira