Esta era para ser uma postagem curta com algumas imagens e uma solução fácil de aplicar. Ficou fora de controle. E-mail HTML é difícil. Para se divertir, veja como isso pode dar errado: Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub 
Sinta-se à vontade para dar uma olhada nesta postagem e nas imagens. Ao final da postagem, eu teria chegado mais ou menos à conclusão de que, devido à popularidade do modo escuro, talvez valesse a pena refazer o e-mail de resumo, em vez de tentar aplicar soluções improvisadas ao seu código atual. Isso não depende de mim, e talvez eu esteja olhando para isso há muito tempo.
Houve algumas perguntas recentes sobre como os e-mails de resumo são renderizados em clientes de e-mail configurados para o modo escuro. O principal problema é que a cor de fundo do cabeçalho do resumo é invertida em clientes de e-mail que lidam com o modo escuro invertendo completamente as cores (aplicativo Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) e Windows Mail). Isso cria um problema de contraste entre a cor do cabeçalho e o logotipo do site.
Esses clientes de e-mail também têm problemas com a cor do texto nos botões e na seção “Desde sua última visita” do resumo.
Todas as imagens abaixo são do serviço de teste de e-mail Litmus:
De um site Discourse com um esquema de cores escuro, usando um logotipo PNG branco com fundo transparente:
Esperado (Gmail App Dark para Android):
Ruim (Gmail Dark para iOS, OL Office 365 Dark, Outlook 2021 Dark, Windows 10 Mail Dark):
Visão geral do cliente móvel (o Gmail para iOS é o único cliente com problemas óbvios com a cor do cabeçalho):
Aqui está o mesmo teste com o e-mail de resumo do Meta (esquema de cores claro padrão, logotipo PNG escuro em fundo transparente). Observe que o Meta não tem a configuração do site apply custom styles to digest ativada, portanto, não está recebendo as meta tags e estilos do modo escuro para clientes que os suportam (Apple Mail e versões recentes do Mail do iOS). Se a configuração apply custom styles to digest estivesse ativada, suspeito que os testes do iPhone Dark também teriam problemas de contraste entre o logotipo e a cor de fundo.
Existem algumas maneiras de forçar a cor de fundo do cabeçalho do e-mail a corresponder à cor do esquema de cores padrão do site:
Para o aplicativo Gmail para iOS, a cor de fundo do cabeçalho pode ser definida com uma imagem de fundo criada com um linear-gradient. Imagens de fundo criadas dessa forma não têm sua cor invertida. O truque é definir ambas as cores do linear-gradient para o valor da cor “header background” do esquema de cores padrão do site Discourse.
Isso pode ser feito agora adicionando CSS personalizado na aba Admin / Customize / Email Style / CSS. Defina os valores de cor para o valor da cor “header background” do esquema de cores padrão. (Observe que não é possível usar var(--header_background) para definir a cor no editor de CSS de e-mail):
.digest-header {
background-image: linear-gradient(#111, #111);
}
Testando essa abordagem para o e-mail de resumo do Meta, estou começando a ter algumas dúvidas sobre ela como uma solução para sites que têm um esquema de cores padrão claro. O logotipo é legível, mas isso parece um pouco estranho?
Para os clientes de e-mail de desktop Outlook 2021 Dark e Windows 10 Mail Dark, o problema com a inversão da cor de fundo do cabeçalho pode ser corrigido adicionando uma regra !important à background-color definida para o .digest-header. Isso não pode ser feito via CSS personalizado porque o Discourse já está adicionando um estilo background-color ao elemento sem a regra !important. Essa regra é adicionada após o CSS personalizado, portanto, tem precedência. (Observe que essa abordagem parece funcionar apenas para forçar a cor de fundo para uma cor escura. Ela falha quando tento usá-la para forçar o fundo do cabeçalho para #ffffff.)
O problema com a cor do texto na seção “Desde sua última visita” para clientes de e-mail que realizam uma inversão completa de cores não parece ter uma solução fácil. Existe um hack para o Gmail iOS sugerido aqui: Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. Ele usa modos de mesclagem para enganar o Gmail a definir uma cor de texto branca. Funciona na teoria, mas dada a complexidade da marcação do e-mail de resumo, não acho que valha a pena prosseguir.
Resumindo, acho que para sites Discourse que têm um esquema de cores escuro como seu esquema de cores padrão, uma boa solução por enquanto seria adicionar o CSS que postei acima à sua aba Email Style / CSS. Isso tornará o logotipo do site legível no aplicativo Gmail Dark do iOS. Adicioná-lo não causou problemas com outros clientes de e-mail que testei. Para sites que têm um esquema de cores claro padrão, estou menos certo sobre essa abordagem. Forçar um fundo de cabeçalho branco em uma tela escura não fica bom.
O e-mail de resumo foi desenvolvido antes que o modo escuro fosse comumente usado. Talvez, devido à popularidade recente do modo escuro, faça sentido refazer o e-mail de resumo com o objetivo de exibi-lo bem em modo escuro e claro em clientes de e-mail populares.
Se refazer completamente o e-mail de resumo estiver fora do escopo, talvez valha a pena considerar fornecer configurações dark_mode_digest_logo e light_mode_digest_logo. Em pelo menos alguns clientes de e-mail, será possível detectar o modo e exibir o logotipo apropriado.
Para melhorar o modo escuro em clientes desktop Outlook, o Discourse poderia deixar alguns nomes de classe no HTML do e-mail em vez de removê-los todos. Esses nomes de classe poderiam ser usados para segmentar o modo escuro no Outlook: https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (Observe que o Outlook não consegue lidar com vários nomes de classe em um elemento, então alguns nomes de classe ainda precisariam ser removidos do arquivo digest.html.erb.)
