Novidade no Safari 27.3 Beta
A versão beta do Safari 27.3 traz uma funcionalidade chamada Modo Escuro Adaptativo. Quando ativado pelo usuário, o navegador converte páginas claras para o tema escuro, oferecendo uma experiência visual mais confortável.
O suporte a modo escuro na web começou com o Safari 12.1, lançado na primavera de 2019, tornando-o o primeiro navegador a oferecer esse recurso. Apesar de quase 40% dos carregamentos de páginas ocorrerem em ambiente escuro, apenas 10% das páginas oferecem suporte nativo. O Modo Escuro Adaptativo busca reduzir essa diferença, proporcionando uma experiência consistente em todo o conteúdo web.
Para experimentar, o usuário deve definir a aparência do sistema como escura e acessar um site com fundo claro. O Safari exibe uma prévia e um botão ‘Experimentar’. Se o site já indicar suporte a modo escuro por meio da meta tag ou da propriedade CSS color-scheme: light dark, nenhuma alteração é aplicada. Nos demais casos, o navegador analisa rapidamente as cores da página e inverte o brilho quando o fundo é predominantemente claro, mantendo inalteradas as páginas já escuras.
O coração da transformação está em uma matriz de cores que inverte a luminosidade enquanto preserva a matiz, escurecendo fundos claros e clareando textos. O objetivo é atender ao requisito de contraste WCAG de 4.5:1, garantindo que botões, textos sobre imagens e menus suspensos permaneçam legíveis. Gradientes CSS claros também são convertidos para tons escuros.
Imagens são tratadas com cuidado. Arquivos SVG são inspecionados e suas cores ajustadas quando necessário. Para imagens de mapa de bits, o sistema verifica os histogramas de pixels e inverte logos simples em preto e branco, deixando a maioria dos recursos visuais intactos. Efeitos como máscaras e mix-blend-mode podem ser desativados se produzirem resultados indesejados após a transformação, enquanto elementos
A privacidade é priorizada: os sites não podem detectar se o Modo Escuro Adaptativo foi aplicado. Scripts que consultam estilos CSS obtêm as cores originais, e imagens renderizadas em canvas mantêm seu estado original, evitando a criação de identificadores para rastreamento.
Para desenvolvedores cujos sites ainda usam técnicas antigas, pequenas atualizações podem melhorar a compatibilidade. Substitua ícones em mapa de bits por SVG, use cores ou gradientes CSS em vez de imagens de fundo repetidas, adote CSS moderno para bordas arredondadas e estados de botão, e crie imagens com fundos transparentes. Adicionar espaçamento a contêineres evita o excesso de informação.
Se for desejada uma experiência escura em uma seção específica da página, aplique color-scheme: light dark ao elemento e adicione estilos escuros personalizados. Para controle total, inclua suporte completo a modo escuro, uma prática cada vez mais simples com as ferramentas atuais.
As tecnologias necessárias para suporte total a modo escuro, como as funções CSS color-mix() e contrast-color(), estão amplamente disponíveis. Declaresse suporte por meio da meta tag color-scheme no cabeçalho HTML ou da propriedade CSS em :root ou body, evitando injeções via JavaScript. Se preferir que uma página não seja transformada, utilize a meta tag ou a regra CSS color-scheme: light only, lembrando que a palavra-chave ‘only’ ainda não é suportada no beta inicial.
Interessados em discutir como o Modo Escuro Adaptativo afeta seus projetos podem entrar em contato com web-evangelist@apple.com. Usuários que encontrarem problemas durante a experimentação devem enviar um relatório para a equipe responsável.
Com informações de: Hacker News (Y Combinator)