Come impedire a iOS 13 Dark Mode di interrompere le e-mail

Abbiamo un'app di e-commerce che invia i dettagli dell'ordine quando viene effettuato un acquisto e abbiamo appena riprogettato quel modello di email. Negli ultimi giorni abbiamo ricevuto segnalazioni che mancavano metà del testo nell'e-mail ad alcuni clienti.

Dopo aver finalmente ottenuto uno screenshot, abbiamo appreso che il problema si sta verificando su iPhone usando la modalità oscura. Finora sono stati tutti clienti che utilizzano Gmail con l'app Mail o con Safari (entrambi hanno lo stesso problema). Non sono sicuro che il fattore Gmail sia rilevante o una coincidenza.

La nostra e-mail è semplice: ha uno sfondo bianco, intestazioni grigie e testo in nero. La modalità scura lascia intatti lo sfondo bianco e le intestazioni grigie, ma il testo del corpo viene modificato da nero a bianco. Sullo sfondo bianco, il testo bianco è ovviamente invisibile e nell'e-mail sembra che manchi una grande quantità di contenuti.

C'è qualcosa che può essere fatto per impedire alla modalità scura di cambiare il nostro testo da nero a bianco?

Dovrei notare che abbiamo anche un codice QR incorporato nell'e-mail, quindi sono preoccupato per le soluzioni che consentirebbero alla modalità dark di procedere nella ricolorazione della nostra e-mail completa, poiché credo che renderebbe più difficile il riconoscimento del codice QR .

Modifica: questo non è correlato a nessun codice app, quindi non si applicano le linee guida per lo sviluppo di iOS per la modalità oscura. Questo è semplicemente un problema del modo in cui l'app Mail di Apple su iOS 13 in modalità dark sta visualizzando un'e-mail HTML.

— jessica
fonte

Possibile duplicato del problema del colore bianco iOS13 con textColor di UIKit

— Sodha,

Cosa succede se si imposta esplicitamente il colore del carattere? Suppongo che la modalità scura cambi il carattere in bianco solo se viene lasciato con il colore predefinito.

— Frank Schlegel,

Correlati: webkit.org/blog/8840/dark-mode-support-in-webkit

— Frank Schlegel

@PratikSodha questa domanda si riferisce alle app iOS, sto semplicemente parlando di un'e-mail HTML visualizzata nell'app Mail di Apple in modalità oscura.

— jessica,

@FrankSchlegel il colore e il colore di sfondo sono stati impostati in modo esplicito ovunque, e si stavano ancora spostando. Il link che hai fornito ha avuto la risposta, ho dovuto impostare color-scheme: light onlytutti gli elementi. Grazie mille.

— jessica,

Risposte:

Puoi rimuoverlo forzatamente sui dispositivi Apple, ma ora abbiamo Gmail e Outlook su Mac senza un modo per fermarli.

Metti semplicemente questo nel <head>:

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

"Solo" è l'abbreviazione di "Solo luce" (che funziona ancora)

Ciò risolverà la modalità scura di iPhone e Apple Mail ma non Outlook su Mac o Gmail.

Al momento puoi sovrascrivere Outlook su Mac, ma non è noto l'hacking per Gmail.

Ecco come sovrascrivere per Outlook su 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 a Brian Thies sul forum di tornasole per questo

Ma è meglio provare a risolvere il problema di root, piuttosto che rimuovere una funzionalità (modalità oscura) che i tuoi clienti desiderano.

Apple ha fornito questo modo, con questo nel <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>

Inoltre, assicurati che l'elemento più esterno con il colore di sfondo abbia la classe "darkmode", ad es

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

Quindi, per impostazione predefinita, avrai sfondo bianco, testo nero; e in modalità scura sarà uno sfondo scuro con testo chiaro.

(Fornire il codice per ulteriori domande.)

— nathan
fonte

Grazie al link fornito da @FrankSchlegel

https://webkit.org/blog/8840/dark-mode-support-in-webkit/

utilizzando color-scheme: light onlynel CSS su tutti gli elementi è stata la risposta. Grazie!

— jessica
fonte