Sto usando il tema predefinito senza componenti del tema o personalizzazioni CSS. Nelle Impostazioni, ho specificato il mio logo bianco per la “modalità scura” per l’email digest, perché l’area dello sfondo del logo del digest è scura. Ha un bell’aspetto, di solito:
Tuttavia, quando ricevo un digest (nell’app Gmail) su un iPhone in modalità scura del dispositivo, l’area dello sfondo del logo viene invertita in bianco (tendente al bianco), rendendo il logo quasi invisibile:
Sul desktop, posso visualizzare in anteprima la modalità scura usando l’ispettore di Chrome. Non inverte il colore dello sfondo del logo in bianco. Ma sostituisce il mio logo predefinito (in “modalità chiara”), rendendolo quasi invisibile lì:
Questo mi confonde parecchio… Non so se sto riscontrando un bug, o se ho un’aspettativa errata su come funziona la modalità scura mobile…
Immagino di poter aggiungere un contorno nero attorno al mio logo predefinito in modo che funzioni meglio su uno sfondo chiaro.
Ma sarei lieto di ricevere qualsiasi suggerimento per ottenere combinazioni di logo+sfondo del digest che funzionino in tutte le impostazioni.
Solo per confermare, hai apportato modifiche al modello di email HTML di Discourse che si trova in Admin / Personalizza / Stile email? Hai anche aggiunto del CSS nella scheda CSS che si trova in quella pagina?
Inoltre, l’impostazione del sito applica stili personalizzati al digest è abilitata sul tuo sito? Quella impostazione è abilitata per impostazione predefinita.
Supponendo che eventuali personalizzazioni che hai apportato non causino il problema, la mia ipotesi è che ciò che sta accadendo è che il segnaposto %{dark_mode_styles} che si trova nel modello di email predefinito di Discourse venga sostituito con il CSS aggiunto tramite questo metodo:
Quel metodo aggiunge il seguente CSS al modello:
[dm='header'] {
background: #151515 !important;
}
Quel CSS è inteso a far sì che l’intestazione del digest sia scura quando l’email viene visualizzata su un dispositivo impostato in modalità scura, ma forse alcuni dispositivi stanno ignorando la direttiva !important e visualizzando l’inverso del colore.
Non riesco a riprodurre il problema sul mio telefono Android. Non ho un iPhone per testarlo. Forse qualcun altro può provare a visualizzare un’email di riepilogo in modalità scura su un iPhone?
Non ho toccato l’HTML personalizzato o il CSS del modello email. Ho disabilitato applica stili personalizzati al digest ma, come previsto, non ha avuto alcun effetto.
Sono felice di inviare un’email di riepilogo se qualcuno vuole pubblicare o inviarmi un indirizzo…
Ho ricevuto email dal sito. Si visualizzano correttamente nell’app Gmail sul mio telefono Android in modalità scura. Non ho un dispositivo iOS su cui testare.
Sul dispositivo iOS di @ToddZ, ottiene gli stessi risultati indipendentemente dal fatto che l’impostazione apply custom styles to digest sia abilitata o meno:
La mia ipotesi è che l’app Gmail per iOS non supporti ancora la media query prefers-color-scheme: Can I email… @media (prefers-color-scheme). Quella pagina dice anche che Android non la supporta, ma le email vengono visualizzate correttamente in Gmail su Android per me.
In qualche modo correlato, potrebbe valere la pena notare da qualche parte che l’impostazione apply custom styles to digest deve essere abilitata affinché venga applicato il CSS della modalità scura aggiunto al modello di email.
@isaac, non sono sicuro se ti stai ancora occupando di questo. Potrebbe valere la pena testare come Gmail su iOS sta gestendo questo aspetto. Soprattutto quando il tema predefinito del sito Discourse utilizza uno schema di colori scuri.
Se hai la possibilità, puoi provare a generare la stessa email con l’impostazione del sito apply custom styles to digest abilitata? Questa impostazione fa differenza nel modo in cui l’email viene visualizzata in modalità scura su Thunderbird?
Inoltre, puoi ricontrollare per assicurarti che il modello di email disponibile in Admin / Customize / Email Style non sia stato modificato? Se non è stato modificato, il pulsante “Reset to default” in quella pagina sarà disabilitato:
La modalità di inversione completa dei colori è lo schema cromatico più invasivo: non solo inverte le aree con sfondi chiari, ma influisce anche sugli sfondi scuri.
Quindi, se hai già progettato le tue email per avere un tema scuro, questa modalità le renderà ironicamente chiare. Sfortunatamente, questa è attualmente la tattica utilizzata da alcuni dei client di posta elettronica più diffusi, come l’app Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) e Windows Mail.
L’esempio del problema fornito in quel post corrisponde a quanto stai segnalando:
Qualcuno con accesso all’account Litmus di Discourse dovrà testare questo. Per riprodurre il problema, prova a inviare un’email digest a Litmus da un sito Discourse che ha la palette di colori del tema predefinito impostata su uno schema scuro.
Supponendo che ciò attivi il problema, la soluzione semplice sarebbe utilizzare sempre uno schema di colori chiaro per le email, indipendentemente dalla palette di colori assegnata al tema predefinito su Discourse. Esiste anche un approccio suggerito nella sezione “Targeting specifico per Gmail iOS e Outlook Windows” del post che ho collegato che potrebbe potenzialmente funzionare. È un po’ un hack, però.
Chiunque finisca per esaminare questo problema potrebbe anche considerare il modo in cui l’impostazione del sito apply custom styles to digest deve attualmente essere abilitata per aggiungere il supporto della modalità scura ai client di posta elettronica che effettivamente supportano la modalità scura. Non c’è nulla nell’interfaccia utente di Discourse che renda ovvio che questa impostazione sia correlata al supporto della modalità scura.
Wow, sì, Inverti tutto a colori sembra essere quello che sto vedendo, almeno con il digest/riepilogo in Gmail per iOS.
Al momento non ho la larghezza di banda per analizzare l’intero articolo e trovare soluzioni alternative appropriate, ma dovrò provarci prima o poi. Il thread su GitHub per la pubblicazione di esempi di Gmail è aperto dal 2019 e sono state proposte diverse soluzioni, ma non vi è alcuna indicazione che il comportamento sottostante sia cambiato.
Spero che il team di Discourse sia in grado di apportare alcune modifiche generali per unificare l’aspetto tra le piattaforme.
Basandomi sull’email digest che ho visto dal tuo sito, presumo che il tuo sito abbia uno schema di colori scuro predefinito. In tal caso, puoi risolvere il problema che si verifica con il colore di sfondo dell’intestazione nell’app Gmail per iOS aggiungendo il seguente codice alla scheda CSS di Admin / Personalizza / Stile email del tuo sito:
Nota che i colori aggiunti a linear-gradient dovrebbero essere entrambi uguali. Dovrebbero corrispondere al valore impostato per il colore “sfondo intestazione” della palette di colori del tema predefinito:
Penso che questo sia un buon approccio solo per i siti che hanno uno schema di colori scuro impostato come predefinito. I dettagli sul perché funziona sono qui: Investigating activity summary email dark mode issues.
