Come posso usare i CSS personalizzati per personalizzare l’aspetto delle mie email in modalità scura?

Puoi usare il CSS personalizzato nell’editor delle email per cambiare i colori dei pulsanti e delle sezioni, regolare lo sfondo del messaggio e mantenere visibili i loghi in modalità scura. Puoi anche mantenere i colori selezionati dal tuo design in modalità chiara.

Puoi partire dalle opzioni di base della modalità scura mentre prepari la tua email. Se il tuo messaggio ha ancora bisogno di qualche ritocco – ad esempio, se un logo diventa difficile da vedere o i colori dei pulsanti perdono contrasto – puoi usare il CSS personalizzato per perfezionarne l’aspetto.

Cosa ti serve prima di aggiungere stili personalizzati per la modalità scura

Devi avere accesso al CSS personalizzato e conoscere bene il CSS. Dai un’occhiata a Come si usa l’opzione CSS personalizzato nell’editor delle email?

Devi abilitare il CSS personalizzato per ogni blocco che vuoi modificare. Senza questa opzione, la classe CSS del blocco non viene aggiunta all’email inviata, quindi gli stili personalizzati non verranno applicati. Questo vale anche quando aggiungi il codice all’intero messaggio.

Aggiungere CSS personalizzato a un blocco

Per preparare un blocco:

1. Seleziona il pulsante, la sezione o l’immagine che vuoi personalizzare.
2. Attiva Aggiungi CSS personalizzato nel pannello a destra.
3. Nel campo CSS, digita .elem per visualizzare la classe del blocco selezionato.
4. Copia la classe e usala per sostituire ogni .elem-ID nell’esempio che hai scelto.

Ad esempio, sostituisci .elem-ID con una classe come .elem-image-b6047e8db0b0. La classe sarà diversa per ogni blocco.

:root {
 color-scheme: light dark;
 supported-color-schemes: light dark;
}

Come cambiare i colori dei pulsanti in modalità scura

Aggiungi il codice seguente al CSS personalizzato del pulsante. Sostituisci ogni .elem-ID con la classe del pulsante.

In questo esempio si usa uno sfondo arancione chiaro e testo scuro nelle app di posta elettronica compatibili.

1/* Dark mode styles for apps that support this media query,
2   including supported versions of Apple Mail, Outlook, and Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID table td,
5  .elem-ID a,
6  .elem-ID p {
7    background-color: #FFB27A !important;
8  }
9
10  .elem-ID a,
11  .elem-ID p {
12    color: #1A1A1A !important;
13  }
14}
15
16/* Additional background rules for Outlook.com and Outlook mobile apps */
17[data-ogsb] .elem-ID table td,
18[data-ogsb] .elem-ID a,
19[data-ogsb] .elem-ID p {
20  background-color: #FFB27A !important;
21}
22
23/* Additional text rules for Outlook.com and Outlook mobile apps */
24[data-ogsc] .elem-ID a,
25[data-ogsc] .elem-ID p {
26  color: #1A1A1A !important;
27}

Tieni sia il selettore a che quello p. Coprono i pulsanti con e senza link. Le regole che iniziano con[data-ogsb] e [data-ogsc] offrono un supporto aggiuntivo in alcune app di Outlook.

.elem-ID table td,
.elem-ID a,
.elem-ID p {
 background-image: linear-gradient(#FF6600, #FF6600) !important;
}

Come cambiare i colori delle sezioni in modalità scura

Aggiungi questo codice al CSS personalizzato della sezione e sostituisci ogni .elem-ID con la classe della sezione:

1/* Dark mode styles for apps that support this media query,
2   including supported versions of Apple Mail, Outlook, and Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID,
5  .elem-ID > table {
6    background-color: #1E1E1E !important;
7  }
8
9  .elem-ID div > p,
10  .elem-ID div > h1,
11  .elem-ID div > h2,
12  .elem-ID div > h3,
13  .elem-ID li {
14    color: #F2F2F2 !important;
15  }
16}
17
18/* Additional background rules for Outlook.com and Outlook mobile apps */
19[data-ogsb] .elem-ID,
20[data-ogsb] .elem-ID > table {
21  background-color: #1E1E1E !important;
22}
23
24/* Additional text rules for Outlook.com and Outlook mobile apps */
25[data-ogsc] .elem-ID div > p,
26[data-ogsc] .elem-ID div > h1,
27[data-ogsc] .elem-ID div > h2,
28[data-ogsc] .elem-ID div > h3,
29[data-ogsc] .elem-ID li {
30  color: #F2F2F2 !important;
31}

Questo esempio assegna alla sezione uno sfondo scuro e un testo chiaro. Si applica sia alle sezioni standard che a quelle a larghezza intera, lasciando i pulsanti all’interno della sezione con i loro colori originali.

Le colonne con colori di sfondo propri richiedono regole separate. I frammenti di testo con colori assegnati individualmente potrebbero comunque essere gestiti dall’app di posta.

Come modificare lo sfondo del messaggio in modalità scura

Aggiungi questo esempio al CSS personalizzato dell’intero messaggio, sotto le impostazioni a livello di messaggio:

1/* Change the message background in apps that support this media query */
2@media (prefers-color-scheme: dark) {
3  body,
4  .elem-body {
5    background-color: #121212 !important;
6  }
7}
8
9/* Additional background rule for Outlook.com and Outlook mobile apps */
10[data-ogsb] .elem-body {
11  background-color: #121212 !important;
12}

Questo modifica lo sfondo attorno alle tue sezioni nelle app di posta elettronica compatibili. Le sezioni con sfondi propri richiedono stili dedicati.

Lascia .elem-body così com’è. È la classe effettiva del messaggio, non un segnaposto.

Per mantenere lo sfondo originale del messaggio, sostituisci #121212 con il colore della modalità chiara. Questo non impedirà a tutte le app di posta elettronica di modificare lo sfondo.

Come mantenere visibile un logo scuro

Un logo scuro con sfondo trasparente può diventare difficile da vedere quando l’area dietro di esso diventa scura. Puoi aggiungere uno sfondo chiaro dietro l’immagine.

Aggiungi questo codice al CSS personalizzato del blocco immagine e sostituisci ogni .elem-ID con la classe del blocco immagine:

1/* Add a light background in apps that support this media query */
2@media (prefers-color-scheme: dark) {
3  .elem-ID img {
4    background-color: #FFFFFF !important;
5  }
6}
7
8/* Additional background rule for Outlook.com and Outlook mobile apps */
9[data-ogsb] .elem-ID img {
10  background-color: #FFFFFF !important;
11}
12
13/* Gmail apps: preserve the background behind the image.
14   This rule also applies in light mode. */
15.elem-ID img {
16  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
17}

Sostituisci #FFFFFF ovunque con il colore di sfondo della modalità chiara della sezione. Il gradiente aiuta a mantenere quello sfondo nelle app di Gmail e si applica anche in modalità chiara.

Un’immagine che ha già uno sfondo a tinta unita, come un JPG, di solito non ha bisogno di questa modifica.

@media (prefers-color-scheme: dark) {
 .elem-ID img {
   content: url("https://example.com/logo-dark.png") !important;
 }
}

Perché gli stili appaiono diversi a seconda delle app di posta

Le app di posta gestiscono la modalità scura in modi diversi. I commenti negli esempi descrivono l’uso previsto di ciascuna tecnica; non garantiscono il supporto in ogni versione di un’app.

E se Gmail ignorasse uno snippet?

Prova a spostare le regole specifiche per Outlook – quelle che iniziano con [data-ogsc] o [data-ogsb] – nel CSS personalizzato dell’intero messaggio, tenendole separate dalle altre regole del blocco.

Tieni il CSS personalizzato abilitato sul blocco in questione e mantieni la sua classe in ogni selettore.

Risoluzione dei problemi

Se nessuno degli stili viene applicato, controlla che:

• il CSS personalizzato sia abilitato su ogni blocco di destinazione.
• Ogni .elem-ID sia stato sostituito con la classe del blocco corretta.
• .elem-body sia rimasto invariato nelle regole di sfondo del messaggio.
• L’app di posta elettronica del destinatario supporti la tecnica che stai utilizzando.
• Non stai combinando gli esempi con la modalità “force light”.

Prima di inviare il messaggio alla tua lista, assicurati di testarlo.

1. Controlla il design sia in modalità chiara che in quella scura.
2. Invia messaggi di prova alle app di posta e ai dispositivi che usano i tuoi destinatari.
3. Controlla il contrasto del testo, le etichette dei pulsanti, la visibilità del logo e gli sfondi attorno alle sezioni.
4. Verifica che il design originale rimanga leggibile anche dove gli stili personalizzati non sono supportati.
5. Ripeti i test dopo aver modificato i colori o le immagini.

Nota: l’anteprima modalità scuradell’editor non riproduce il comportamento di tutte le app di posta elettronica e il CSS personalizzato non viene visualizzato nell’anteprima standard del messaggio.