Prévia de e-mail no modo escuro

Os programas de e-mail não pedem licença antes de mudar as cores da sua mensagem no modo escuro, e não concordam entre si sobre como fazer isso. Cole o seu HTML para ver os três comportamentos lado a lado e descobrir o que fica difícil de ler.

Como obter o HTML: Mailchimp, Brevo, Constant Contact e serviços parecidos oferecem “Exportar como HTML” ou “Ver código”. Para uma assinatura, clique em “Copiar o código HTML” no nosso gerador de assinaturas. No Gmail, abra uma mensagem recebida e escolha “Mostrar original” para ver o código.

Seu código fica neste navegador e não é enviado. As prévias rodam em quadros isolados, com os scripts desativados. As imagens são buscadas nos próprios endereços delas, como faria um aplicativo de e-mail.

Três comportamentos, não um único modo escuro

Num site, você decide como fica o modo escuro. No e-mail, quem decide é o programa de leitura, e cada família de programas tem o seu jeito de fazer isso.

ComportamentoApps típicosO que faz
Nenhuma mudançaApple Mail, Outlook para Mac, Gmail no navegadorSuas cores ficam. A janela em volta da mensagem é escura e a própria mensagem só muda se trouxer seus próprios estilos escuros.
Inversão parcialOutlook.com, Outlook e Gmail no Android, Outlook no iPhoneFundos claros são escurecidos e textos escuros são clareados. Áreas que já eram escuras ficam como estão.
Inversão totalGmail no iPhone, Outlook clássico para WindowsTodas as cores são invertidas, inclusive fundos escuros, que ficam claros.

Então uma mensagem tem quatro aparências: o original claro mais essas três. A página mostra as quatro na largura de computador ou de celular.

Como as prévias são produzidas

A ferramenta reescreve cada cor que encontra no seu HTML, esteja ela num atributo style inline, num bloco <style> ou num atributo antigo como bgcolor. Cada cor é convertida em matiz, saturação e luminosidade. A matiz fica e a luminosidade muda.

  • Inversão parcial: um fundo com luminância relativa acima de 0,35 fica escuro. Textos e bordas na metade mais escura da escala ficam claros. Todo o resto fica como está.
  • Inversão total: a luminosidade é espelhada em todas as cores, então o branco vira quase preto e o preto vira quase branco.
  • Nenhuma mudança: nada é reescrito. Se a mensagem declara color-scheme com dark, as regras @media (prefers-color-scheme: dark) dela são ativadas. Uma mensagem que não define nenhuma cor recebe o fundo escuro padrão do app.

As regras escritas para o Outlook.com com os seletores [data-ogsc] e [data-ogsb] são aplicadas na prévia parcial. Cada prévia roda num quadro isolado (sandbox) em que scripts não podem ser executados.

O que os apontamentos significam

Contraste insuficiente
Em cada versão, a ferramenta associa cada trecho de texto visível ao fundo mais próximo atrás dele e calcula a taxa de contraste. Os pares abaixo de 4,5:1 são listados, do pior para o melhor. Abaixo de 3:1 o modo é marcado como erro. O texto oculto de pré-cabeçalho é ignorado.
Texto cinza médio
Um cinza com pouca saturação e luminosidade entre 45 e 70 por cento fica no meio da escala. Inverta-o e você obtém quase o mesmo cinza, só que agora sobre o fundo oposto. Use #555555 ou mais escuro para textos secundários.
Logo escuro com fundo transparente
A ferramenta carrega até 15 imagens e examina os pixels delas. Quando a maioria dos pixels opacos é muito escura e as bordas são transparentes, o logo vai se dissolver num fundo escuro. Uma imagem com fundo branco opaco também é apontada, porque vai aparecer como uma caixa branca.
Transparência a conferir
O servidor da imagem não permitiu que outro site lesse os pixels dela. Você vai ter que olhar as prévias escuras por conta própria.
Configurações de modo escuro
Diz se a mensagem declara suporte ao modo escuro e se fornece cores escuras. Declarar suporte sem fornecer cores é pior do que não declarar nada.
Imagens e texto
Uma mensagem com menos de 120 caracteres de texto real é feita principalmente de imagens, e texto dentro de imagens nunca se adapta. Os atributos alt ausentes são contados.

Correções que sobrevivem a todos os apps

Comece pelas escolhas que não precisam de código. Use pares fortes, ou seja, texto muito escuro sobre fundo muito claro ou o contrário, já que os tons médios são o que a inversão estraga. Dê a um logo escuro um contorno branco de dois ou três pixels, ou coloque-o sobre uma forma branca arredondada dentro do próprio arquivo de imagem. Mantenha as palavras como texto HTML.

Numa newsletter, você pode então acrescentar seus próprios estilos escuros para os apps que os respeitam:

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

Uma assinatura não tem essa opção. O editor onde você a cola remove <meta> e <style>, o que deixa você com cores bem definidas e um logo que funcione nos dois fundos. Nosso gerador de assinatura de e-mail pode mandar o resultado direto para esta página.

Isto é uma simulação feita a partir de comportamentos observados. As regras reais de recoloração não são publicadas e mudam com as atualizações dos apps. Tome um resultado limpo como bom sinal e depois envie uma mensagem de teste para um celular e um computador configurados no modo escuro.

Perguntas frequentes

Por que meu e-mail fica diferente no modo escuro?

O programa de e-mail do leitor mudou as suas cores. Alguns apps escurecem fundos claros e clareiam textos escuros, alguns invertem todas as cores e alguns não mudam nada. O que você obtém depende do app, não do seu design.

Posso impedir o Gmail de inverter as cores do meu e-mail?

Não. O Gmail não dá aos remetentes nenhuma opção para desativar isso, e os apps dele para celular ignoram as media queries de modo escuro. O que você pode fazer é criar uma mensagem que continue legível depois de invertida, com contraste forte, sem cinzas médios e com um logo de contorno claro.

Por que meu logo sumiu no modo escuro?

Provavelmente é um logo escuro salvo com fundo transparente. O app trocou o branco atrás dele por quase preto, e ninguém enxerga escuro sobre escuro. Acrescente um contorno branco ou uma placa branca à imagem, ou forneça uma versão clara para o modo escuro.

Quais apps de e-mail suportam prefers-color-scheme?

O Apple Mail no Mac, iPhone e iPad, e o Outlook para Mac aplicam. O Gmail e o Outlook para Windows não, e o Outlook.com usa os próprios seletores [data-ogsc]. Seus estilos escuros vão melhorar as coisas para alguns leitores. Não vão cobrir todo mundo.

O que a meta tag color-scheme faz num e-mail?

<meta name="color-scheme" content="light dark"> diz ao app que a própria mensagem cuida dos dois modos. Os apps que a respeitam passam então a usar seus estilos escuros. Só a acrescente junto com um bloco prefers-color-scheme que defina as cores escuras.

O HTML que eu colo é enviado para algum lugar?

Não. A reescrita das cores e as verificações rodam no seu navegador. Só as imagens que o seu HTML referencia são pedidas, nos próprios endereços delas, do jeito que qualquer app de e-mail as buscaria.

Verificações relacionadas