
Alguém lhe diz que as cores do seu site não parecem bem. Desbotadas, ou invertidas, ou o gráfico no meio da página é um retângulo branco brilhante num layout escuro. Você abre a mesma página no mesmo modelo de telemóvel e tudo está exatamente como desenhou.
Essa pessoa não se enganou e você também não. Desde 3 de novembro de 2026 existe uma terceira parte nessa conversa, e a coisa mais importante de saber sobre ela não é que muda as cores. É que a sua página é deliberadamente impedida de descobrir.
O que é o Modo Escuro Adaptativo
O Modo Escuro Adaptativo chegou na versão beta do Safari 27.3. A própria descrição do WebKit é uma frase: “Quando ativado pelo utilizador, o Safari adapta websites luminosos e apresenta-os como escuros.”
A razão que dão é uma lacuna entre dois números, e vale a pena citá-los porque explicam porque é que isto sempre ia acontecer: “Quase 40% dos carregamentos de páginas da web são de utilizadores em modo escuro, e apenas 10% dos carregamentos suportam isto.”
É uma opção ativa, do utilizador e não de você. Alguém a navegar com aparência de sistema escura chega a uma página luminosa, o Safari oferece uma pré-visualização, e toca Experimentar. A partir daí, páginas luminosas saem escuras para ele. Não há banner na página e nada na sua análise que diga que aconteceu.
Como ela decide se toca na sua página
Existem dois caminhos e apenas um deles envolve você.
Se a sua página declara suporte para modo escuro, nada acontece. Uma página com <meta name="color-scheme" content="light dark"> no seu HTML, ou color-scheme: light dark em CSS, é deixada exatamente como escrita. Você disse ao Safari que trata o modo escuro você mesmo, e ele acredita.
Para tudo o resto, ela olha. Analisa a página, estima se é predominantemente clara ou escura, e deixa páginas com aparência escura em paz. Uma página com aparência clara é transformada.
A transformação em si é uma matriz de cores que inverte luminosidade preservando matiz, então um fundo branco fica escuro e texto escuro fica claro sem tudo virar um negativo fotográfico. Para texto apunta-se ao rácio de contraste WCAG 4.5:1.
A parte que produz bugs é o que ela não transforma
Uma inversão abrangente seria fácil de entender. Esta não é uma, e as exceções são de onde vêm os relatórios.
- Gradientes CSS claros são transformados, então um gradiente que sintonizou cuidadosamente é recalculado.
- Imagens SVG são inspecionadas e as suas cores transformadas quando necessário. Imagens bitmap são maioritariamente deixadas sozinhas, mas os seus histogramas de pixels são analisados e logos preto e branco simples são invertidos.
-
Máscaras e
mix-blend-modepodem ser desativadas. O raciocínio do WebKit é que esses efeitos produzem resultados indesejáveis num elemento cujas cores foram transformadas, por isso em alguns casos o Modo Escuro Adaptativo desativa-as em vez de transformá-las. -
<canvas>é deixado completamente inalterado, porque o conteúdo canvas é, nas suas palavras, “difícil de prever”.
Leia as últimas duas juntas e tem um defeito que ninguém escreveu. Um gráfico renderizado num canvas mantém o seu fundo branco enquanto cada pixel ao seu redor fica escuro. Uma sobreposição composted para de compor. Ambos são invisíveis para você e óbvios para a pessoa que olha para o ecrã.
A sua página não tem permissão de saber
Esta é a parte que importa se está a tentar perceber o que alguém está a ver, e é uma escolha de design deliberada e não uma lacuna.
A posição da Apple é que uma definição detetável é uma superfície de fingerprinting, então:
O Safari impede que websites detetem quando o Modo Escuro Adaptativo foi aplicado. JavaScript que consulte cores CSS receberá as cores autorais originais, não as transformadas.
Isto é absoluto, e o contorno óbvio está fechado no mesmo parágrafo: “Qualquer imagem desenhada no canvas renderiza na sua forma original.” Fazer uma captura de ecrã da sua própria página num canvas devolve a versão que escreveu, não a versão que está a ser exibida.
Assim getComputedStyle devolve-lhe os seus próprios valores. Um ponto final de diagnóstico que relata cores calculadas relata a sua folha de estilos. Um pedido “cole as suas cores calculadas” ao relator devolve o mesmo. Cada instrumento que possui está do lado errado da transformação, que é uma forma familiar: a página não consegue ver-se a si mesma, e a única testemunha é uma pessoa a olhar para um ecrã.
Session Replay
Extensão gratuita do Chrome. Um clique na página que está com problemas captura a captura de ecrã, a consola e o registo de rede, e dá-lhe uma ligação para colar no bilhete.
Desativar, e a captura a partir de hoje
Duas declarações, fazendo coisas opostas.
color-scheme: light dark diz que suporta modo escuro e vai trata-lo. O Modo Escuro Adaptativo deixa-o em paz. Esta é a que usar se tiver, ou pretender construir, um verdadeiro tema escuro, e o conselho do WebKit é declarar no cabeçalho HTML em vez de injetar mais tarde com JavaScript, para que a página renderize corretamente o mais cedo possível.
color-scheme: light only, ou <meta name="color-scheme" content="light only">, diz que a página deve ser exibida apenas em modo claro, e recusa a transformação completamente.
A captura vale a pena saber antes de enviar como correção: o WebKit nota que a palavra-chave only “não é suportada no Safari 27.3 beta 1”. É uma beta, a funcionalidade é explicitamente descrita como evoluindo através dessa beta, e a saída documentada não funciona ainda na primeira construção dela.
O que perguntar à pessoa que relatou
A pergunta ordinária, “qual é o browser e versão”, não o vai levar lá. Alguém que tocou Experimentar há várias semanas não pensa nisso como uma definição que mudou, assim como não relataria o brilho do seu ecrã.
Duas perguntas funcionam. Parece-lhe mal numa janela privada? e parece-lhe mal noutro dispositivo? Ambas mudam a resposta se o Modo Escuro Adaptativo está envolvido, e nenhuma requer que o relator saiba o que é.
Ainda melhor é uma imagem. A lacuna entre o que o seu código descreve e o que um ecrã mostra é exatamente a lacuna que uma captura de ecrã fecha, e neste caso é a única coisa que consegue, porque a página em si foi colocada no lado errado da pergunta.
Esta é a segunda vez num ano que um lançamento do Safari mudou o que um relatório de bug significa em vez de o que uma página pode fazer, depois de as mudanças de relatório no Safari 27.
O que tirar disto
Um navegador agora edita as suas cores em nome do utilizador, decide caso a caso quais elementos editar, desativa alguns dos seus efeitos para o fazer, e esconde toda a operação do seu código por uma boa razão.
Se tem um tema escuro, declare-o e isto nunca se aplica a você. Se não tem, a escolha realista é deixar acontecer e verificar que as suas canvases e modos de mistura sobrevivem, ou declarar light only e esperar pela beta que o suporte. O que não está disponível é descobrir de dentro da página, que significa que o próximo relatório de “as cores não parecem bem” é um que deveria acreditar.
O anúncio do WebKit, com os exemplos e a lista completa do que é e não é transformado, é Introducing Adaptive Dark Mode.