O suporte a modo escuro em e-mail se divide em três, e apenas um deles é o CSS para o qual a maioria dos remetentes projeta. Alguns clientes respeitam @media (prefers-color-scheme: dark) exatamente como está escrito. Outros reescrevem a regra silenciosamente em uma sintaxe que nunca dá match, e então recorrem às próprias heurísticas de inversão automática. Um terceiro grupo mal reconhece a mais recente meta tag color-scheme. Projetar apenas para o primeiro grupo significa projetar para menos da metade da caixa de entrada.
Grupo um: clientes que respeitam a media query
Segundo o caniemail.com, @media (prefers-color-scheme: dark) tem suporte total no Gmail (todas as plataformas) e no Apple Mail (macOS 12.4+ / iOS 13.0+). O Outlook fica logo atrás na maioria de suas superfícies — Windows (2016+), macOS (16.70+), Outlook.com (2019-07+) e mobile (2020-01+) reconhecem a regra, embora o Outlook para macOS e o Outlook.com também apliquem seus próprios atributos de dados de modo escuro junto com ela. O Samsung Email (Android 6.1+) também a implementa totalmente. Combinado, o painel testado do caniemail.com aponta suporte geral de 41.86% — uma maioria real dos grandes clientes, mas longe de todos eles.
Grupo dois: clientes que reescrevem a regra em algo que nunca dá match
Esse é o grupo que de fato produz os e-mails de modo escuro com aparência quebrada que a maioria dos remetentes já viu. Yahoo Mail, AOL e Fastmail não ignoram prefers-color-scheme diretamente — eles a reescrevem em uma sintaxe inválida (@media ( _filtered_a )) que nunca pode avaliar como verdadeira, desativando silenciosamente todas as regras dentro dela. O HEY faz o equivalente reescrevendo a regra para @media (false). Em ambos os casos, o cliente então recorre às próprias heurísticas automáticas de inversão de cor sobre o design original em modo claro — o que é exatamente o que produz logotipos desbotados e texto de baixo contraste ilegível que ninguém projetou explicitamente, porque nada do que o remetente escreveu está de fato orientando o resultado.
Grupo três: a meta tag color-scheme, pouco adotada
<meta name="color-scheme" content="light dark"> (e sua prima supported-color-schemes) existe para informar a um cliente para qual(is) modo(s) um e-mail foi deliberadamente projetado, para que o cliente possa pular a inversão automática por completo em vez de adivinhar. É o ajuste mais cirúrgico — mas, segundo o caniemail.com, a adoção combinada é de apenas 4.88%, com suporte relevante limitado a versões mais novas do Apple Mail (macOS 16+ / iOS 12.4+) e ao webmail de desktop do Gmail (2023-09+). A maioria dos outros clientes a ignora completamente.
O que isso significa para o design
Nenhuma regra CSS única cobre os três grupos ao mesmo tempo — essa é a consequência direta da divisão acima, não uma lacuna de nenhuma técnica isolada. A abordagem confiável é o aprimoramento progressivo, o mesmo princípio ao qual chega o guia de modo escuro da Litmus:
- Projete primeiro um e-mail em modo claro sólido e totalmente legível. É a base para a qual todo cliente recorre, incluindo os que fazem inversão automática no grupo dois.
- Sobreponha overrides explícitos de
prefers-color-scheme, para os ~42% de clientes que de fato os aplicarão — não dependa apenas da meta tag, dada sua adoção muito menor. - Proteja logotipos e imagens contra a inversão automática: um PNG semitransparente sobre um fundo branco sólido pode se inverter em uma bagunça ilegível de escuro sobre escuro nos clientes do grupo dois. Uma borda sutil ou um bloco de cor sólida atrás do ativo sobrevive à inversão de um jeito que um PNG transparente puro não sobrevive.
- Nunca presuma que um fundo escuro implica uma cor de texto ciente do modo escuro — a inversão automática do grupo dois pode inverter um fundo sem alterar o texto da forma que o remetente espera, então cores de texto definidas explicitamente importam mais em modo escuro, não menos.
Veja Suporte a clientes de e-mail para o mesmo panorama por cliente aplicado ao próprio estúdio e motor de fallback do MailInApp.