Il supporto alla modalità scura nelle email si divide in tre modi, e solo uno di questi è il CSS per cui progetta la maggior parte dei mittenti. Alcuni client rispettano @media (prefers-color-scheme: dark) esattamente come scritto. Altri lo riscrivono silenziosamente in una sintassi che non può mai corrispondere, per poi ricadere sulle proprie euristiche di auto-inversione. Un terzo gruppo riconosce a malapena il più recente meta tag color-scheme. Progettare solo per il primo gruppo significa progettare per meno della metà della posta in arrivo.
Primo gruppo: i client che rispettano la media query
Secondo caniemail.com, @media (prefers-color-scheme: dark) è pienamente supportata in Gmail (tutte le piattaforme) e Apple Mail (macOS 12.4+ / iOS 13.0+). Outlook segue da vicino sulla maggior parte delle sue piattaforme — Windows (2016+), macOS (16.70+), Outlook.com (2019-07+) e mobile (2020-01+) riconoscono tutte la query, anche se Outlook per macOS e Outlook.com applicano inoltre i propri attributi dati per la modalità scura in aggiunta. Anche Samsung Email (Android 6.1+) la implementa pienamente. Nel complesso, il pannello testato di caniemail.com colloca il supporto totale al 41.86% — una vera maggioranza dei client principali, ma ben lontana dalla totalità.
Secondo gruppo: i client che riscrivono la query in qualcosa che non corrisponde mai
Questo è il gruppo che produce concretamente le email in modalità scura dall'aspetto rotto che la maggior parte dei mittenti ha visto. Yahoo Mail, AOL e Fastmail non ignorano del tutto prefers-color-scheme — la riscrivono in una sintassi non valida (@media ( _filtered_a )) che non può mai risultare vera, disabilitando silenziosamente ogni regola al suo interno. HEY fa l'equivalente riscrivendo la query in @media (false). In entrambi i casi, il client ricade quindi sulle proprie euristiche automatiche di inversione dei colori applicate al design originale in modalità chiara — il che è esattamente ciò che produce loghi sbiaditi e testo a basso contrasto illeggibile che nessuno ha progettato esplicitamente, perché nulla di ciò che il mittente ha scritto sta effettivamente guidando il risultato.
Terzo gruppo: il meta tag color-scheme, adottato a malapena
<meta name="color-scheme" content="light dark"> (e il suo cugino supported-color-schemes) esiste per dire a un client per quale modalità (o modalità) un'email è stata deliberatamente progettata, in modo che il client possa saltare del tutto l'auto-inversione invece di indovinare. È la correzione più chirurgica — ma secondo caniemail.com, l'adozione complessiva si ferma appena al 4.88%, con un supporto significativo limitato alle versioni più recenti di Apple Mail (macOS 16+ / iOS 12.4+) e a Gmail desktop webmail (2023-09+). La maggior parte degli altri client la ignora del tutto.
Cosa significa per il design
Nessuna singola regola CSS copre tutti e tre i gruppi contemporaneamente — è la conseguenza diretta della suddivisione descritta sopra, non una lacuna di una singola tecnica. L'approccio affidabile è il progressive enhancement, lo stesso principio a cui arriva la guida alla modalità scura di Litmus:
- Progetta prima un'email in modalità chiara solida e completamente leggibile. È la base su cui ricade ogni client, inclusi quelli auto-invertenti del secondo gruppo.
- Aggiungi sopra di essa override espliciti di
prefers-color-scheme, per il ~42% dei client che li applicherà effettivamente — non affidarti al solo meta tag, data la sua adozione molto più bassa. - Rendi a prova di proiettile loghi e immagini contro l'auto-inversione: un PNG semi-trasparente su uno sfondo bianco pieno può invertirsi in un pasticcio illeggibile scuro su scuro nei client del secondo gruppo. Un sottile bordo o un riquadro di sfondo pieno dietro l'asset sopravvive all'inversione in un modo che un PNG trasparente nudo non fa.
- Non dare mai per scontato che uno sfondo scuro implichi un colore del testo consapevole della modalità scura — l'auto-inversione del secondo gruppo può invertire uno sfondo senza toccare il testo nel modo in cui un mittente si aspetta, quindi i colori del testo impostati esplicitamente contano di più in modalità scura, non di meno.
Vedi Supporto dei client email per la stessa panoramica per client applicata allo studio e al motore di fallback di MailInApp.