Questo doveva essere un breve post con alcune immagini e una soluzione facilmente applicabile. È sfuggito di mano. Le email HTML sono difficili. Per divertimento, ecco come può andare storto: Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub 
Sentiti libero di scorrere questo post e guardare le immagini. Alla fine del post ero giunto più o meno alla conclusione che, data la popolarità della modalità scura, potrebbe valere la pena rielaborare l’email digest, invece di cercare di applicare soluzioni al suo codice attuale. Non dipende da me, e forse l’ho guardata troppo a lungo.
Ci sono state alcune domande recenti su come vengono renderizzate le email digest sui client di posta elettronica impostati sulla modalità scura. Il problema principale è che il colore di sfondo dell’intestazione del digest viene invertito sui client di posta elettronica che gestiscono la modalità scura eseguendo un’inversione completa dei colori (app Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) e Windows Mail). Ciò crea un problema di contrasto tra il colore dell’intestazione e il logo del sito.
Questi client di posta elettronica hanno anche problemi con il colore del testo nei pulsanti e nella sezione “Dalla tua ultima visita” del digest.
Tutte le immagini seguenti provengono dal servizio di test email Litmus:
Da un sito Discourse con uno schema di colori scuro, utilizzando un logo PNG bianco con sfondo trasparente:
Atteso (Gmail App Dark per Android):
Scadente (Gmail Dark per iOS, OL Office 365 Dark, Outlook 2021 Dark, Windows 10 Mail Dark):
Panoramica dei client mobili (Gmail per iOS è l’unico client con problemi evidenti con il colore dell’intestazione):
Ecco lo stesso test con l’email digest di Meta (schema di colori chiari predefinito, logo PNG scuro su sfondo trasparente). Si noti che Meta non ha abilitata l’impostazione del sito apply custom styles to digest, quindi non riceve i metatag e gli stili della modalità scura per i client che li supportano (Apple Mail e versioni recenti di iOS Mail). Se l’impostazione apply custom styles to digest fosse abilitata, sospetto che anche i test su iPhone Dark avrebbero problemi di contrasto tra logo e colore di sfondo.
Ci sono un paio di modi in cui il colore di sfondo dell’intestazione dell’email può essere forzato a corrispondere al colore dello schema di colori predefinito del sito:
Per l’app Gmail per iOS, il colore di sfondo dell’intestazione può essere impostato con un’immagine di sfondo creata con un linear-gradient. Le immagini di sfondo create in questo modo non vedono il loro colore invertito. Il trucco è impostare entrambi i colori del linear-gradient sul valore del colore “header background” dello schema di colori predefinito del sito Discourse.
Ciò può essere realizzato ora aggiungendo CSS personalizzato nella scheda Admin / Customize / Email Style / CSS. Impostare i valori dei colori sul valore del colore “header background” dello schema di colori predefinito. (Nota, non è possibile utilizzare var(--header_background) per impostare il colore nell’editor CSS dell’email):
.digest-header {
background-image: linear-gradient(#111, #111);
}
Testando questo approccio per l’email digest di Meta, sto iniziando ad avere qualche dubbio sulla sua efficacia come soluzione per i siti che hanno uno schema di colori predefinito chiaro. Il logo è leggibile, ma questo sembra un po’ strano?
Per i client di posta elettronica desktop Outlook 2021 Dark e Windows 10 Mail Dark, il problema dell’inversione del colore di sfondo dell’intestazione può essere risolto aggiungendo una regola !important al background-color impostato per .digest-header. Questo non può essere realizzato tramite CSS personalizzato perché Discourse sta già aggiungendo uno stile background-color all’elemento senza la regola !important. Quella regola viene aggiunta dopo il CSS personalizzato, quindi ha la precedenza. (Nota, questo approccio sembra funzionare solo per forzare il colore di sfondo a un colore scuro. Fallisce quando provo a usarlo per forzare lo sfondo dell’intestazione a #ffffff.)
Il problema del colore del testo nella sezione “Dalla tua ultima visita” per i client di posta elettronica che eseguono un’inversione completa dei colori non sembra avere una soluzione facile. C’è un hack per Gmail su iOS suggerito qui: Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. Utilizza le modalità di fusione per ingannare Gmail nell’impostare un colore del testo bianco. Funziona in teoria, ma data la complessità del markup dell’email digest, non penso che valga la pena perseguirlo.
Riassumendo, penso che per i siti Discourse che hanno uno schema di colori scuro come schema di colori predefinito, una buona soluzione per ora sarebbe aggiungere il CSS che ho postato sopra alla loro scheda Email Style / CSS. Questo renderà il logo del sito leggibile sull’app Gmail Dark per iOS. Aggiungerlo non ha causato problemi con altri client di posta elettronica che ho testato. Per i siti che hanno uno schema di colori chiaro predefinito, sono meno sicuro di questo approccio. Forzare uno sfondo dell’intestazione bianco su uno schermo altrimenti scuro non ha un bell’aspetto.
L’email digest è stata sviluppata prima che la modalità scura fosse comunemente utilizzata. Forse, data la recente popolarità della modalità scura, avrebbe senso rielaborare l’email digest con l’obiettivo di farla visualizzare bene sia in modalità scura che chiara sui client di posta elettronica più diffusi.
Se la rielaborazione completa dell’email digest è fuori ambito, potrebbe valere la pena considerare la fornitura di impostazioni dark_mode_digest_logo e light_mode_digest_logo. Su almeno alcuni client di posta elettronica, sarà possibile rilevare la modalità e visualizzare il logo appropriato.
Per migliorare la modalità scura sui client desktop Outlook, Discourse potrebbe lasciare alcuni nomi di classe nell’HTML dell’email invece di rimuoverli tutti. Questi nomi di classe potrebbero essere utilizzati per indirizzare la modalità scura su Outlook: https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (Nota, Outlook non può gestire più nomi di classe su un elemento, quindi alcuni nomi di classe dovrebbero comunque essere rimossi dal file digest.html.erb.)
