Dark Mode in e-mail: wat kan, wat kan niet, en wie doen er mee
Voor sommigen is het een uitkomst, voor anderen een hype waar ze het voordeel niet van zien: Dark Mode. Maar hoe je er ook tegen aankijkt, het is een ontwikkeling die steeds breder gedragen wordt in apps, smartphones en PC’s. Daarnaast krijgt ook e-mailmarketing krijgt ermee te maken. Sterker nog, het is hier en daar al actief! Waar Apple in 2018 als eerst Dark Mode implementeerde in Apple Mail, is ondertussen Gmail gevolgd en de andere grote jongens zullen op korte termijn volgen.
Help me even herinneren… wat was dat Dark Mode nou precies?
Samengevat kun je zeggen dat Dark Mode een techniek is dat het kleurschema van je apparaat of software ‘omdraait’. In het Engels wordt dit ook wel invert genoemd. Stel: je bent aan het surfen op internet en je hebt het gebruikelijke beeld op je scherm zoals 95% van alle websites eruit zien: een witte of lichte achtergrond met donkere typografie. Op het moment dat je Dark Mode hierop los zou laten, zal het de kleuren in de website op je scherm als een soort fotonegatief omdraaien. Dat wil zeggen; de lichte achtergrond is donker geworden en de donkere typografie wordt licht. Maar waarom wil men dit nu eigenlijk? Daar zijn genoeg redenen voor, zoals bijvoorbeeld:
- Gebruikers geven aan het als prettiger en rustiger voor de ogen te ervaren, vooral in donkere of schemerige omgevingen.
- Het zorgt voor een lager batterijgebruik, waardoor de levensspan hiervan vergroot wordt.
- Sommige gebruikers geven aan dat het de leesbaarheid dusdanig vergroot, waardoor teksten makkelijker weglezen en ook beter begrepen worden.
Zo zijn er nog talloze redenen te noemen, maar uiteindelijk komen deze redenen neer op persoonlijke voorkeur of je Dark Mode activeert of niet.
Dark Mode & e-mailing: welke e-mailclients ondersteunen het?
Al is de support voor Dark Mode nog niet heel breed uitgerold onder e-mailclients, toch zijn er ondertussen al een aantal van Dark Mode voorzien. Op dit moment ondersteunen de onderstaande vijf clients die het al:
- Mobiele-clients
- Gmail App (Android & iOS)
- Outlook App (Android & iOS)
- Desktop-clients
- Apple Mail
- Outlook 2019 (Mac & Windows)
- Web-clients
- Outlook.com
Zoals je ziet zijn dit eigenlijk alleen de grote, bekende namen. Door de populariteit van dit groepje e-mailclients overkoepelt dit al een groot gedeelte van een klantdatabase met opt-ins. Toch zal nog lang niet iedereen in die database in staat zijn Dark Mode te gebruiken binnen e-mail.
De valkuilen van Dark Mode binnen e-mail
De bovenstaande clients laten het dus toe om de gebruiker zijn kleurschema aan te passen. Er is echter een maar… Natuurlijk, want e-mail blijft e-mail. Het is namelijk zo dat niet iedere client van bovenstaand groepje Dark Mode op dezelfde manier toepast of hanteert.
Dat zit namelijk zo: Op dit moment zijn er drie verschillende type kleurschema’s. Laten we deze kleurenschema’s voor het gemak paden noemen, die een e-mailclient kan bewandelen. Ieder pad zal zijn eigen manier van het afhandelen van Dark Mode hebben. Dat heeft dan ook invloed heeft op hoe het visueel uiteindelijk in je e-mail getoond zal worden. Dit zijn de drie kleurschema’s/paden:
- Geen kleurveranderingen (No color changes)
Sommige e-mailclients bieden de mogelijkheid Dark Mode aan te zetten, om vervolgens helemaal geen impact te hebben op de e-mails. Of Dark Mode nu aan of uit staat, visueel is er geen verschil. Apple Mail en iOS zijn hier voorbeelden van. Pas als Dark Mode-gerelateerde CSS code aan de e-mail is toegevoegd, waarin jij verteld wat de client exact moet doen, acteert het hiernaar. - Gedeeltelijke kleurenomzetting (Partial Color Invent)
Dit pad detecteert gebieden in een e-mail waar een lichte achtergrond voorkomt, en keert de kleur daar dan om. Zo worden lichte achtergronden donker, en donkere teksten licht. Dit gebeurt naar eigen inzicht van de e-mailclient. E-mailclients die op deze manier Dark Mode afhandelen zijn gelukkig ook te targeten via CSS, zodat je altijd zelf de touwtjes in handen kunt blijven hebben. - Volledige kleuromzetting (Full Color Invert)
Dit is het meeste stugge pad, en dat komt omdat het niet alleen gebieden met lichte achtergronden zelf om zet, maar het beïnvloed donkere achtergronden ook. Bijvoorbeeld: je hebt een e-mail gebouwd die van zichzelf al een donkere uitstraling heeft. Wat dit pad dan doet, is van de donkere achtergronden een lichte kleur van maken. De Gmail App en Outlook 2019 (Windows) zijn met dit kleurschema voorzien.
Een mooi overzicht van de huidige staat van Dark Mode onder verscheidene e-mailclients: (bron: https://sidemail.io/articles/dark-mode-in-html-email/)
| Email client | Popularity | Dark UI | Auto-invert email colors | Supports @media (prefers-color-scheme) | |
|---|---|---|---|---|---|
| Apple Mail iPhone + iPad | 36.1% | Yes | Yes | Yes | Show screenshot |
| Gmail Android 10 | 27.8% * | Yes | Yes (forced if not already dark) | No | Show screenshot (not up-to-date) Note: Gmail is the only tested email client that intelligently inverses colors of images inside the email as wel |
| Gmail iOS 13 | 27.8% * | No | No | No | Show screenshot Note: Dark more is coming, already teased with dark splash screen. |
| Gmail webmail | 27.8% * | Yes | No | No | Show screenshot Note: Support for dark UI theme, but not the actual emails. |
| Outlook iOS 13 | 9.1% * | Yes | Yes (forced if not already dark) | No | Show screenshot |
| Outlook Android 10 | 9.1% * | Yes | Yes (forced if not already dark) | No | Show screenshot |
| Outlook Windows 10 | 9.1% * | Yes | Yes (forced if not already dark) | No | Show screenshot |
| Outlook macOS | 9.1% * | Yes | Yes (forced if not already dark) | Yes | Show screenshot Note:Buggy border color – if border color is changed with prefers-color-scheme it still tries to invert border color even if it’s already dark. |
| Apple Mail macOS | 7.5% * | Yes | Yes (if transparent background) | No | Show screenshot |
| Yahoo! webmail | 6.3% * | Yes | No | No | Show screenshot Note:Support for dark UI theme, but not the actual emails. |
| AOL webmail | 6.3% * | No | No | No | Show screenshot |
| Outlook.com webmail | 2.3% | Yes | Yes (forced if not already dark) | Yes | Show screenshot |
| Windows 10 Mail | 0.5% | Yes | Yes (forced if not already dark) | No | Show screenshot Note:The worst email client from the bunch, doesn’t even support border-radius. |
| Zoho Mail webmail | less than 0.5% | Yes | Yes (forced if not already dark) | No | Show screenshot Note:Inverts color hue, eg.: blue becomes orange. |
| Mozilla Thunderbird Windows 10 | less than 0.5% | Yes | No | Yes | Show screenshot Note:The only email client tested which doesn’t forcefully auto-invert email colors, but supports prefers-color-scheme. |
| Spark macOS | less than 0.5% | Yes | Yes (if transparent background) | Yes | Show screenshot |
| Spark iOS 13 | less than 0.5% | Yes | Yes (if transparent background) | Yes | Show screenshot |
| Spark Android 9 | less than 0.5% | Yes | Yes (if transparent background) | Yes | Show screenshot |
Dark Mode targeten en stylen met CSS
Als je je eigen CSS styling wil toepassen op de Dark Mode-techniek, dan kun je twee methodes proberen:
- @media (prefers-color-scheme: dark)
Dit werkt in wezen hetzelfde als een media query voor reguliere mobiele styling. Wel is het zo dat deze CSS declaratie iedere interface target waarop Dark Mode is geactiveerd. - [data-ogsc] en/of [data-ogsb]
Deze target alleen de Outlook App, maar is simpel in gebruik. Je dupliceert alle styles die je eventueel al bij @media (prefers-color-scheme: dark) hebt geplaatst, en voeg dan de juiste [data-ogsc] en/of [data-ogsb] prefixes toe voor iedere CSS regel. Helaas kunnen we ook bij het targeten van Dark Mode niet spreken van een consequente, eenduidige manier van werken.
Onderstaand een overzicht hoe Dark Mode getarget én gerendered wordt, of juist niet, per e-mailclient:
| Email Client | HTML Treatment in Dark Mode | @media | [data-ogsc] and/or [data-ogsb] |
|---|---|---|---|
| Gmail App (Android) | Partial color invert | ||
| Gmail App (iOS) | Full color invert | ||
| Outlook (Android) | Partial color invert | ||
| Outlook (iOS) | Partial color invert | ||
| iOS Mail | No color changes | ||
| Apple Mail | No color changes | ||
| Outlook 2019 (MacOS) | Partial color invert | ||
| Outlook 2019 (Windows) | Full color invert | ||
| Outlook.com | Partial color invert | Partial |
Dark Mode & E-mail: wat kun je nu doen?
Als je kijkt naar de ontwikkelingen in de techniek van e-mail de afgelopen jaren, de snelheid waarmee dat gaat, en het feit dat er op korte termijn niets gedaan kan worden aan het versnipperde landschap van de grote hoeveelheid beschikbare e-mailclients (met ieder zijn eigen willetje, regeltjes, en manier van targeten) zit er momenteel niets anders op dan:
- Dark Mode al wel te implementeren voor de e-mailclients die door CSS-targeting volledig naar wens beheersbaar zijn
- Op de koop toenemen dat er e-mailclients zijn die zelf bepalen welke kleur een object krijgt in contrast tot de rest van de mail
- Een engelengeduld hebben tot meer e-mailclients Dark Mode implementeren, dan wel de overstap maken van Full Color Invert naar Partial Invert. Hierdoor bepaal je zélf hoe Dark Mode met je mail zal omgaan.
Kortom, hoe lang het nog duurt tot nagenoeg iedere e-mailclient volledig te targeten is én beheersbaar zal zijn omtrent Dark Mode, is voor nu dus nog onbekend. Het is natuurlijk een techniek die nog in zijn kinderschoenen staat en voor e-mailclients is het dan ook zoeken wat de gebruiker prefereert.
Wel is het aan te raden toch alvast te beginnen met de implementatie van Dark Mode in je e-mailtemplate. Dan kan je het groepje mensen in je klantendatabase die Dark Mode kunnen gebruiken deze functie laten gebruiken zoals het door jou bedoeld is. Daarnaast leer je ermee werken en doe je ervaring op in wat content-wise nou wel of juist niet werkt voor Dark Mode.
