Como impedir o iOS 13 Dark Mode de quebrar e-mails

10

Temos um aplicativo de comércio eletrônico que envia detalhes do pedido quando uma compra é feita e acabamos de redesenhar esse modelo de email. Nos últimos dias, recebemos relatórios de alguns clientes com metade do texto do e-mail ausente.

Depois de finalmente obter uma captura de tela, descobrimos que o problema está acontecendo nos iPhones usando o modo escuro. Até agora, todos eles eram clientes que usam o Gmail no aplicativo Mail ou no Safari (ambos têm o mesmo problema). Não tenho certeza se o fator gmail é relevante ou uma coincidência.

Nosso e-mail é simples: possui fundo branco, títulos em cinza e texto em preto. O modo escuro está deixando o fundo branco e os cabeçalhos cinza intocados, mas o texto do corpo está sendo alterado de preto para branco. No plano de fundo branco, o texto em branco é obviamente invisível e o e-mail parece estar perdendo grandes quantidades de conteúdo.

Existe algo que possa ser feito para impedir que o modo escuro altere nosso texto de preto para branco?

Devo observar que também temos um código QR incorporado no email, por isso estou preocupado com soluções que permitam que o modo escuro prossiga na recoloração de todo o email, pois acredito que isso tornaria mais difícil o reconhecimento do código QR .

Editar: isso não está relacionado a nenhum código de aplicativo, portanto, as diretrizes para o desenvolvimento do iOS no modo escuro não se aplicam. Isso é simplesmente uma questão de como o aplicativo Mail da Apple no iOS 13 no modo escuro está exibindo um email em HTML.

ios css email gmail ios-darkmode jessica
fonte
Possível duplicado da questão iOS13 cor branca com textColor de UIKit
Pratik Sodha
O que acontece se você definir explicitamente a cor da fonte? Presumo que o modo escuro apenas altere a fonte para branco se for deixada com a cor padrão.
Frank Schlegel
2
Relacionados: webkit.org/blog/8840/dark-mode-support-in-webkit
Frank Schlegel
@PratikSodha essa pergunta está relacionada aos aplicativos para iOS, estou simplesmente falando sobre um email em HTML exibido no aplicativo Mail da Apple no modo escuro.
jessica
@FrankSchlegel a cor e a cor de fundo foram definidas explicitamente em todos os lugares e ainda estavam sendo alteradas. O link que você forneceu tinha a resposta, eu tive que definir color-scheme: light onlytodos os elementos. Muito obrigado.
jessica

Respostas:

10

Você pode removê-lo à força em dispositivos Apple, mas agora temos o Gmail e o Outlook no Mac sem uma maneira de pará-los.

Basta colocar isso no <head>:

<meta name="color-scheme" content="only">

"Somente" é a abreviação de "Somente luz" (que também ainda funciona)

Isso será corrigido no modo escuro do iPhone e no Apple Mail, mas não no Outlook no Mac ou no Gmail.

No momento, você pode substituir o Outlook no Mac, mas não existe um hack conhecido para o Gmail.

Aqui está como substituir o Outlook no Mac:

<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>

HT para Brian Thies no fórum Litmus para este

Mas é melhor tentar corrigir o problema raiz, em vez de remover uma funcionalidade (modo escuro) que seus clientes desejam.

A Apple forneceu dessa maneira, com isso no <head>:

<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>

Além disso, verifique se o elemento mais externo com a cor de fundo possui a classe "darkmode", por exemplo

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">

Então, por padrão, você terá fundo branco, texto em preto; e no modo escuro, haverá um fundo escuro com texto claro.

(Forneça o código para outras dúvidas.)

Nathan
fonte