La modalità scura, nota anche come dark mode, è un’impostazione che varia la palette dei colori di un’interfaccia per visualizzare il contenuto in alto contrasto usando colori di sfondo scuri e primo piano chiaro.
Di fatto, rispetto alla modalità con cui siamo abituati ad utilizzare app desktop o mobile, gli sfondi chiari diventano scuri, e il testo nero per contrasto diventa bianco.
Perchè si applica?
- minimizzare la luce blu
- migliorare la leggibilità per ridurre l’affaticamento degli occhi supportando gli utenti che sono più sensibili in temi fortemente luminosi.
- Risparmio di batteria: La modalità scura nel web e nelle app mobili può prolungare la durata della batteria di un dispositivo. Google ha confermato che la modalità scura sugli schermi OLED è stata di grande aiuto per la durata della batteria.
- E’ di moda: giusto o sbagliato che sia avere lo schermo nero con scritte colorare è cool, per noi programmatori ormai è un abitudine e se un software non offre la versione dark rimaniamo quasi delusi.
A cosa si applica?
Il dark mode, nato inizialmente per i siti web e le app mobile, si è poi diffuso anche nel contesto delle email. E proprio questo è il nostro punto di osservazione:
- App di posta Elettronica (Outlook App, Gmail app, Apple mail)
- Client di posta (es. Outlook macOs, Outlook Windows 10)
- Impostazione del webmail (gmail, outlook.com)
Cosa fa?
- Cambia il colore del testo e il background-color invertendo la tonalità dei colori (da chiari a scuri e viceversa)
- Alcune app usano logiche del tutto proprietarie, e quindi purtroppo diverse una dalle altre, per individuare il nuovo colore da applicare
- Altre supportano anche i CSS e mediaquery per cambiare i colori in base a ciò che desideriamo
Come ottimizzare le proprie email per il Dark Mode
Possiamo ottimizzare le nostre newsletter sia dalla costruzione grafica che dal punto di vista del codice.
Progettazione
- Immagini: Utilizzare PNG con sfondo trasparente, evitare di usare immagini che corrispondono al colore dello sfondo nell’html.
- Logo: Se il logo è scuro applicare un bordo chiaro che lo farà risaltare nella modalità scura
Come creare il logoEsempio errato
Esempio corretto
- Divider grafici: Attenzione ai divisori con sfondi incorporati o colori fissi; è preferibile usare HTML e CSS il più possibile per codificare i divisori e i separatori, permetterà loro di cambiare anche i colori per rimanere coerenti con il design.
- Icone social: solitamente sono di colore scuro a piede della comunicazione; corrono il rischio di perdersi. Si consiglia di utilizzare tratti bianchi intorno a elementi di design neri in quanto il tratto bianco non sarà visibile in modalità chiara ma solo in modalità scura e permetterà di rendere distinguibili gli elementi
La prima icona di twitter non è ottimizzata per il dark mode
In questo caso l’immagine ha il riquadro bianco che evidenzia le icone anche nel dark mode,ma non si vede nella modalità light
Quanto è compatibile?
E’ importante ricordare che non tutti i dispositivi/software supportano il dark mode:
- Totalmente compatibile → Inverte completamente i colori di sfondo e colere del testo
- Parzialmente compatibile → Cambia il colore di sfondo in nero, ma non interpreta le @ media queries
- Non Compatibile → Non interpreta @media queries e non cambia il colore
Tabella di compatibilità Dark Mode
| Email Client | Inverte i colori? | Common Dark Mode Challenge |
| Apple Mail (iPhone/iPad) |
Sì | Inverte i background trasparenti o bianco puro (#fffff). |
| Apple Mail (macOS) |
Sì | Inverte i background trasparenti o bianco puro (#fffff). |
| Outlook (iOS) |
Parzialmente | Può rendere il colore dello sfondo più scuro |
| Outlook (macOS) |
Parzialmente |
Supporta solamente @media (prefers-color-scheme). Può rendere il colore dello sfondo più scuro |
| Outlook (Windows) |
Sì | Inverte automaticamente i colori in modo coerente. |
| Outlook.com (webmail) |
Parzialmente |
Lo scambio di immagini funziona. Può rendere il colore di sfondo più scuro. |
| Gmail (Android) |
Sì | Non supporta le query @media (prefers-color-scheme). |
| Gmail (webmail) |
No | Non supporta le query @media (prefers-color-scheme). |
| AOL (webmail) |
No | Attualmente non c’è alcuna interfaccia utente attuale in modalità scura |
| Yahoo! (webmail) |
No | No current dark mode user interface. |
Come ti aiuta magnews?
Considerato che la compatibilità dipende dai client di posta/webmail utilizzati dal contatto e che non è chiaro il loro comportamento, nel template non abbiamo inserito delle media queries ad hoc, ma ci affidiamo al comportamento nativo dei client o dei webmail.
Per aiutarvi abbiamo inserito una nuova anteprima per il dark mode, così con un semplice click potete capire cosa migliorare.
Clicca il pulsante Anteprima
Clicca l'icona del darkmode
Grazie all' anteprima Dark Mode di magnews, puoi testare in pochi secondi come la tua email si adatta ai vari client di posta. Evita sorprese e garantisci un design perfetto in ogni contesto!