Estou usando o tema padrão sem componentes de tema ou personalização de CSS. Nas Configurações, especifiquei meu logotipo branco de "modo escuro" para o e-mail de resumo, porque a área de fundo do logotipo do resumo é escura. Fica ótimo — geralmente:
No entanto, quando recebo um resumo (no aplicativo Gmail) em um iPhone no modo escuro do dispositivo, a área de fundo do logotipo é invertida para branco (esbranquiçado), tornando o logotipo quase invisível:
No desktop, posso pré-visualizar o modo escuro usando o inspetor do Chrome. Ele não inverte a cor de fundo do logotipo para branco. Mas ele troca pelo meu logotipo padrão (modo claro), tornando-o quase invisível lá:
Isso me deixa bastante confuso… Não sei se estou vendo um bug, ou se tenho a expectativa errada sobre como o modo escuro móvel funciona…
Imagino que poderia adicionar um contorno preto ao meu logotipo padrão para que ele funcione melhor em um fundo claro.
Mas agradeceria qualquer dica para conseguir combinações adequadas de logotipo+fundo de resumo que funcionem em todas as configurações.
Só para confirmar, você fez alguma alteração no modelo de e-mail HTML do Discourse que se encontra em Admin / Personalizar / Estilo de E-mail? Você também adicionou algum CSS na aba CSS que se encontra nessa página?
Além disso, a configuração do site apply custom styles to digest está habilitada no seu site? Essa configuração está habilitada por padrão.
Assumindo que quaisquer personalizações que você tenha feito não estejam causando o problema, minha suposição é que o que está acontecendo é que o placeholder %{dark_mode_styles} que está no modelo de e-mail padrão do Discourse está sendo substituído pelo CSS adicionado por este método:
Esse método adiciona o seguinte CSS ao modelo:
[dm='header'] {
background: #151515 !important;
}
Esse CSS tem a intenção de fazer com que o cabeçalho do resumo fique escuro quando o e-mail é visualizado em um dispositivo configurado para o modo escuro, mas talvez alguns dispositivos estejam ignorando a diretiva !important e exibindo o inverso da cor.
Não consigo reproduzir o problema no meu telefone Android. Não tenho um iPhone para testar. Talvez outra pessoa possa tentar visualizar um e-mail de resumo no modo escuro em um iPhone?
Eu não toquei no HTML personalizado ou CSS do modelo de e-mail. Eu desabilitei aplicar estilos personalizados ao resumo, mas como esperado, isso não teve efeito.
Ficarei feliz em enviar um e-mail de resumo se alguém quiser postar ou me enviar um endereço por DM…
Recebi e-mails do site. Eles são renderizados corretamente no aplicativo Gmail do meu telefone Android no modo escuro. Não tenho um dispositivo iOS para testar.
No dispositivo iOS de @ToddZ, ele obtém os mesmos resultados, independentemente de a configuração apply custom styles to digest estar ativada ou desativada:
Minha suposição é que o aplicativo Gmail do iOS ainda não suporta a consulta de mídia prefers-color-scheme: Can I email… @media (prefers-color-scheme). Essa página também diz que o Android não a suporta, mas os e-mails são renderizados corretamente no Gmail no Android para mim.
De forma um tanto relacionada, pode valer a pena observar em algum lugar que a configuração apply custom styles to digest precisa estar ativada para que o CSS do modo escuro adicionado ao modelo de e-mail seja aplicado.
@isaac, não tenho certeza se você ainda está cuidando disso. Pode valer a pena testar como o Gmail no iOS está lidando com isso. Especialmente quando o tema padrão do site Discourse usa um esquema de cores escuro.
Se tiver uma chance, você pode tentar disparar o mesmo e-mail com a configuração do site apply custom styles to digest ativada? Essa configuração faz alguma diferença em como o e-mail é renderizado no modo escuro no Thunderbird?
Além disso, você pode verificar novamente para ter certeza de que o modelo de e-mail encontrado em Admin / Customize / Email Style não foi editado? Se não foi editado, o botão “Reset to default” nessa página estará desativado:
O Full Color Invert é o esquema de cores mais invasivo: ele não apenas inverte as áreas com fundos claros, mas também afeta fundos escuros.
Portanto, se você já projetou seus e-mails para ter um tema escuro, esse esquema ironicamente os forçará a se tornarem claros. Infelizmente, essa é atualmente a tática usada por alguns dos clientes de e-mail mais populares, como o aplicativo Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) e Windows Mail.
O exemplo do problema nesta postagem corresponde ao que você está relatando:
Alguém com acesso à conta Litmus do Discourse precisará testar isso. Para reproduzir o problema, tente enviar um e-mail de resumo para o Litmus de um site Discourse que tenha sua paleta de cores do tema padrão definida como um esquema de cores escuro.
Assumindo que isso acione o problema, a solução fácil seria sempre usar um esquema de cores claro para e-mails, independentemente da paleta de cores atribuída ao tema padrão no Discourse. Há também uma abordagem sugerida na seção “Gmail iOS & Outlook Windows-specific targeting” da postagem que eu linkei que poderia funcionar. É um pouco de um hack, no entanto.
Quem acabar investigando isso também pode analisar a forma como a configuração do site apply custom styles to digest atualmente precisa ser habilitada para adicionar suporte ao modo escuro para clientes de e-mail que realmente suportam o modo escuro. Não há nada na interface do usuário do Discourse que deixe óbvio que essa configuração está relacionada ao suporte ao modo escuro.
Uau, sim, Inverter Cores Completas parece ser o que estou vendo, pelo menos com o resumo/sumário no Gmail do iOS.
Não tenho largura de banda agora para analisar todo o artigo e descobrir soluções alternativas apropriadas, mas terei que tentar algo eventualmente. O tópico do GitHub para postar exemplos do Gmail está aberto desde 2019, e várias soluções foram propostas, mas não há indicação de que o comportamento subjacente tenha sido alterado.
Espero que a equipe do Discourse consiga fazer alguns ajustes gerais para unificar a aparência em todas as plataformas.
Com base no e-mail de resumo que vi do seu site, presumo que seu site tenha um esquema de cores escuro como padrão. Nesse caso, você pode corrigir o problema que está ocorrendo com a cor de fundo do cabeçalho no aplicativo Gmail para iOS adicionando o seguinte código à guia CSS do seu site em Admin / Personalizar / Estilo de E-mail:
Observe que as cores adicionadas ao linear-gradient devem ser iguais. Elas devem corresponder ao valor definido para a cor “header background” da paleta de cores do tema padrão do seu site:
