Dark mode nelle email: come si dichiara, come si scrive il CSS e come si testa

I tre comportamenti da conoscere

Litmus li descrive come nessun cambiamento, inversione parziale e inversione completa. Con l'inversione parziale il client riconosce soltanto le aree con sfondo chiaro e le scurisce, mentre il testo scuro diventa chiaro. Con l'inversione completa vengono rimappati anche i colori che avevi già scelto scuri, e un'email progettata con uno sfondo scuro può diventare chiara. Email on Acid, nell'articolo del 2 ottobre 2025, aggiunge che Apple Mail inverte il nero puro e il bianco puro senza badare al contrasto, e che Outlook per Windows è l'unico Outlook che inverte i colori in modo costante.

La conseguenza pratica è che non puoi progettare per una sola modalità. Devi decidere, per ciascun colore e immagine, che cosa succede se il client lo lascia com'è, lo scurisce o lo capovolge.

Passo 1: dichiara che l'email sa gestire entrambe le modalità

Le note di WebKit su Dark Mode Support in WebKit spiegano che Safari e WebKit non scuriscono da soli i contenuti web: il documento deve dichiarare il supporto con la proprietà color-scheme. Per le email lo stesso testo precisa che la proprietà fa sapere a Mail quale schema usare e può influenzare le trasformazioni automatiche; dichiarare light dark significa che l'email gestisce da sé la dark mode, mentre light only chiede a Mail di non trasformare un'email pensata solo per la modalità chiara. Su MDN trovi la proprietà color-scheme e il meta tag corrispondente, che deve stare nell'head prima del CSS per evitare lampi di colore al caricamento.

<head>
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <style>
    :root {
      color-scheme: light dark;
      supported-color-schemes: light dark;
    }
  </style>
</head>

Il secondo meta tag, supported-color-schemes, è il vecchio nome: WebKit ricorda che proprietà e meta tag sono stati rinominati partendo da supported-color-schemes, e che il nome precedente resta supportato da Safari e da Mail su macOS 10.14.4. Molte guide per email li scrivono entrambi per coprire le versioni più datate.

Un avvertimento che le guide saltano: Litmus segnala che Apple Mail, senza i meta tag, non cambia i colori; con i meta tag ma senza stili tuoi produce una inversione parziale. Quindi i tag sono una promessa, e dopo averli aggiunti devi davvero scrivere gli stili.

Quanto sia diffuso il supporto lo dice Can I email: per la proprietà color-scheme la pagina riporta una stima del 13,95 % di supporto pieno più il 2,33 % parziale, per un totale del 16,28 %, e una nota per Apple Mail: funziona solo sull'elemento html (la radice). Per la media query prefers-color-scheme la stima è il 41,86 % di supporto.

Passo 2: gli stili dark con prefers-color-scheme

MDN descrive prefers-color-scheme come la media feature che rileva se l'utente ha richiesto un tema chiaro o scuro, tramite il sistema operativo o l'user agent. Lo schema più comune è partire dai colori chiari e sovrascriverli nel blocco dark. In un'email gli stili vanno nell'head con !important, perché devono vincere sugli stili inline. Per Outlook.com e le app Outlook, Litmus indica un metodo alternativo: duplicare le regole dark e prefissarle con gli attributi [data-ogsc] per il testo e [data-ogsb] per lo sfondo.

<style>
  @media (prefers-color-scheme: dark) {
    .body-bg { background-color: #1a1a1a !important; }
    .text-primary { color: #f2f2f2 !important; }
    .card { background-color: #2d2d2d !important; }
  }

  /* Stesse regole per Outlook.com e le app Outlook, che usano
     gli attributi data-ogsc (testo) e data-ogsb (sfondo) */
  [data-ogsc] .text-primary { color: #f2f2f2 !important; }
  [data-ogsb] .body-bg { background-color: #1a1a1a !important; }
</style>

Ricorda dalla tabella sopra che Gmail non legge la media query, quindi il blocco non serve per quel client: lì conta solo che i colori scelti reggano l'inversione automatica.

Passo 3: colori che sopravvivono a un'inversione

Email on Acid consiglia di evitare i valori estremi, visto che Apple Mail inverte #000000 e #FFFFFF indipendentemente dal contrasto, e propone varianti quasi identiche come #000001 e #FFFFFE per non avere sorprese. Litmus conferma la parte sul bianco: in Apple Mail gli sfondi #ffffff puri vengono invertiti se è presente il meta tag. La regola pratica che ne ricavo:

• Usa un grigio molto chiaro o un bianco spento per gli sfondi e un grigio molto scuro per il testo, anziché i due estremi assoluti.
• Per i pulsanti scegli colori di fascia media, che di solito restano riconoscibili sia invertiti sia scuriti; evita sfondi quasi bianchi con testo scuro.
• Non affidare il significato al solo colore: Email on Acid ricorda di controllare il contrasto con le linee guida WCAG in entrambe le modalità, e di non usare solo il colore come segnale.
• Le ombre che in modalità chiara danno profondità possono sparire sullo sfondo scuro, quindi non farne l'unico elemento che separa due blocchi.

Per approfondire contrasti e testi alternativi, leggi anche la guida accessibilità delle email HTML.

Loghi e PNG trasparenti

Il problema classico è il logo scuro su fondo trasparente: nella versione chiara si legge bene, nella versione scura sparisce. Email on Acid elenca tre rimedi. Il primo è un PNG trasparente, che funziona ma va controllato perché il testo scuro può sparire. Il secondo è un contorno o un alone chiaro attorno al logo, che lo rende leggibile in entrambe le modalità, a costo di un effetto che i grafici non amano. Il terzo, che l'articolo definisce spesso il migliore, è preparare una versione del logo per la dark mode e scambiare le immagini con la media query. Litmus aggiunge un dettaglio per i client con poche opzioni di personalizzazione, come l'app Gmail e Outlook 2019 per Windows: un contorno semitrasparente attorno ai PNG con testo scuro.

<style>
  .logo-dark { display: none !important; }
  @media (prefers-color-scheme: dark) {
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
  }
</style>

<img class="logo-light" src="logo-scuro.png" alt="Nome azienda" width="160">
<!--[if !mso]><!-->
<img class="logo-dark" src="logo-chiaro.png" alt="Nome azienda" width="160" style="display:none;">
<!--<![endif]-->

Il commento condizionale intorno al logo scuro serve a far ignorare l'immagine a Outlook per Windows; è lo schema che Email on Acid mostra nel suo articolo, che cita anche mso-hide:all come alternativa. Lo scambio di immagini non funziona dove la media query non è supportata, quindi in quei client resta visibile il logo predefinito: scegli una versione che sia leggibile su entrambi i fondi, o aggiungi il contorno, perché sarà l'unica che molti iscritti vedranno.

Lo stesso vale per icone e illustrazioni con sfondo trasparente. Per quelle che contano davvero, un fondo chiaro con un po' di padding e angoli arrotondati evita la sorpresa di un rettangolo bianco o di un disegno scomparso.

Cosa dicono i framework

MJML. Nella documentazione che ho letto non c'è un componente o una sezione dedicati alla dark mode. Puoi però inserire il tuo CSS in mj-style, che per impostazione predefinita finisce nell'head dell'HTML generato, e usare mj-raw dentro mj-head per aggiungere codice grezzo in fondo all'head: lì metti i meta tag e il blocco prefers-color-scheme. Il framework compila il markup, ma gli stili dark li scrivi tu. Per il confronto con gli altri strumenti guarda MJML contro React Email.

Maizzle. La documentazione della versione 6 spiega che la variante dark: di Tailwind compila in @media (prefers-color-scheme: dark) e che esistono le varianti ogsc: e ogsb: per il testo e lo sfondo della dark mode di Outlook.com. C'è un'avvertenza utile: Gmail scarta l'intero tag style quando incontra at-rule annidate, e combinare dark: con ios: le produce; la soluzione indicata è tenere queste utility in un blocco <Tailwind> separato, così finiscono in un tag style a parte. Trovi il resto nel capitolo Tailwind CSS e, per il paragone, in Maizzle contro MJML.

React Email. È open source e gratuito (react.email). Nelle pagine dei componenti che ho letto la documentazione dice che i componenti sono stati provati su Gmail, Apple Mail, Outlook, Yahoo! Mail, HEY e Superhuman, ma non ho trovato una sezione dedicata alla dark mode, quindi non posso dirti come venga gestita; verifica nella documentazione ufficiale prima di basarti su un comportamento automatico.

Come testare senza indovinare

Il test manuale parte dal dispositivo: attiva la dark mode sul telefono e sul computer, invia l'email a più account (Apple Mail, Gmail, Outlook) e guardala sia da mobile sia da desktop. Se la tua lista usa soprattutto due o tre client, due prove ben fatte valgono più di un'anteprima in cento.

Per un controllo più ampio ci sono gli strumenti di anteprima. Email on Acid pubblica due piani: Basic a 99 $ al mese con 1.000 anteprime e Premium a 199 $ con 2.000, con un sovrapprezzo di 0,15 $ per anteprima in più. Sulla pagina prezzi l'azienda annuncia che da giugno 2026 gli abbonati attuali passano a Mailgun Inspect, quindi controlla lo stato prima di sottoscrivere. Il suo articolo sulla dark mode raccomanda di visualizzare l'email nei vari client e nelle due modalità. Litmus descrive nella pagina sui test anteprime in oltre 100 client, dark mode compresa, ma la pagina dei prezzi non pubblica più un listino: c'è un modulo di contatto, quindi non posso darti una cifra. I dettagli del confronto sono in Litmus contro Email on Acid.

Un conto di esempio, mio e basato su un'ipotesi che devi verificare: se ogni client, in modalità chiara e scura, contasse come anteprima separata, con 30 client si avrebbero 60 anteprime a giro. Una newsletter settimanale con tre giri di correzioni e quattro invii al mese fa 4 × 3 × 60 = 720 anteprime, che stanno nelle 1.000 del piano a 99 $. Con due modelli diversi si arriva a 1.440: Basic costerebbe 99 $ + 440 × 0,15 $ = 165 $, mentre Premium a 199 $ le coprirebbe per intero. La pagina prezzi dice che un'anteprima è lo screenshot di un singolo client o dispositivo, ma non chiarisce il caso della dark mode, e per questo il consiglio è chiedere conferma.

Quando conviene non inseguire la perfezione

Non ogni email merita lo stesso lavoro. Ricevute, reset della password e avvisi di sicurezza vengono aperti da tutti e in ogni momento della giornata, quindi lì la leggibilità in dark mode ha la priorità; per una promozione stagionale può bastare una palette robusta e un controllo sui client principali. Se l'identità del marchio dipende da combinazioni di colori precise, puoi decidere di dichiarare light only e accettare che alcuni client scelgano comunque di invertire. Per il resto del CSS che incide su queste scelte, vedi la guida al CSS nelle email.