Modo escuro no e-mail: três comportamentos dos clientes e o que fazer com eles

Mais de um quarto dos e-mails hoje é aberto no modo escuro, e os clientes lidam com isso de três formas diferentes: deixam as cores intactas, invertem parcialmente ou invertem por completo. Dá para influenciar com duas metatags e uma media query, mas elas não funcionam em todo lugar. A seguir, o que cada cliente faz exatamente e qual código dá mais controle.

Quão difundido isso está

O modo escuro deixou de ser um ajuste de nicho. Os dados da Litmus colocam as aberturas em escuro acima de um quarto do total, e o crescimento vem do celular, onde o tema costuma seguir a configuração do sistema.

Há outro número que importa mais e que quase ninguém cita. As aberturas no modo escuro são bem mais propensas a ser instantâneas: abre-se o e-mail e fecha-se em seguida. A diferença é grande demais para ser acaso, e a explicação é simples: um e-mail quebrado pela inversão fica ilegível e é fechado.

Outro dado revelador do mesmo estudo: apenas 11% dos profissionais sempre consideram o modo escuro ao montar e-mails, embora muitos mais o testem. O problema é visto, mas não resolvido, porque a solução não é óbvia.

Três comportamentos dos clientes

Não é óbvia porque não existe um comportamento único. Os clientes se dividem em três grupos, e o mesmo e-mail aparece diferente em cada um.

• não mexem nas cores: o e-mail aparece como foi montado e só muda a interface ao redor
• inversão parcial: fundos claros escurecem e o texto escuro clareia, mas as cores da marca sobrevivem
• inversão total: todas as cores são invertidas, inclusive as que você definiu de propósito

A traiçoeira é a inversão total. Se você fez o e-mail escuro de propósito, esse cliente vai virá-lo para claro e o resultado será exatamente o oposto da intenção.

O código que assume o controle

Primeiro e mais importante: duas metatags no cabeçalho. Elas dizem ao cliente que você considerou os dois esquemas, e isso sozinho já impede a inversão forçada em vários clientes.

Depois vem uma media query com suas próprias cores escuras. Ela é entendida pelo Apple Mail, pelo e-mail do iOS, pelo Outlook 2019 e posteriores, pelo Thunderbird e pelo Samsung Mail: uma parcela considerável do público.

Repare nas duas abordagens do exemplo: as cores de fundo e texto são redefinidas, enquanto para o logotipo há duas versões prontas e uma fica oculta. É mais confiável do que torcer para a inversão tratá-lo bem.

O que quebra com mais frequência

• um logotipo escuro sobre fundo transparente fica invisível
• texto cinza-claro sobre branco vira cinza-escuro sobre escuro após a inversão e perde contraste
• imagens com fundo branco deixam retângulos claros no meio de um e-mail escuro
• botões com preenchimento claro se fundem ao fundo depois da virada
• divisores e bordas finas somem por completo
• um e-mail feito escuro de propósito é virado para claro na inversão total

O logotipo: a maior dor de cabeça

O logotipo é o problema mais frequente, e em pesquisas com profissionais as imagens são apontadas como a parte mais difícil da preparação para o modo escuro.

Existem três soluções que funcionam, e a escolha depende de quanta precisão de marca você precisa. Primeira, um logotipo com contorno ou placa branca: funciona em todo lugar, mas parece um meio-termo. Segunda, duas versões do logotipo, clara e escura, alternadas por media query: elegante, mas não universal. Terceira, um logotipo com cores legíveis sobre qualquer fundo, decisão que costuma ser tomada no nível do manual da marca.

Como testar

Não teste em um lugar só. O conjunto mínimo é Apple Mail no celular, o app do Gmail no celular e o Outlook no computador: juntos cobrem os três comportamentos.

• envie um teste para você e abra no celular com o modo escuro ligado
• troque o tema do sistema sem fechar o e-mail: alguns clientes o repintam na hora
• confira separadamente o logotipo, os botões e as imagens com fundo branco
• verifique se o texto é legível: o contraste importa mais que a precisão da cor

Como funciona no Mailvex

O Mailvex suporta modo escuro no nível do e-mail: as cores de fundo, texto e blocos são definidas separadamente para claro e escuro, e as metatags são adicionadas ao cabeçalho automaticamente na compilação.

Você pode enviar duas versões do logotipo e a troca acontece sozinha. A pré-visualização alterna entre os esquemas dentro do editor, então os problemas aparecem antes do envio, e não depois.

Perguntas frequentes

É preciso um e-mail separado para o modo escuro?

Não. Um e-mail separado exigiria saber de antemão o tema do destinatário, e essa informação não está disponível para quem envia. O caminho certo é um único e-mail com uma media query que o cliente aplica quando for o caso.

Por que um e-mail fica bom em uma caixa e quebrado em outra?

Porque os clientes aplicam modelos de inversão diferentes, e fazem isso depois da entrega. Quem envia não controla qual modelo o cliente escolhe; só pode declarar uma preferência e preparar uma alternativa.

As metatags sozinhas bastam?

Elas resolvem o problema principal: a inversão total forçada em alguns clientes. Mas definir cores escuras específicas exige uma media query. As metatags sem ela dão previsibilidade, não controle.