denise
nijland.

16 MAART 2023

Dark mode optimalisatie: de mogelijkheden van dark mode binnen e-mailclients

Laatst geüpdatet op 16 mei 2023: “New Outlook voor Windows” toegevoegd

Een dark mode interface is voor veel mensen prettiger voor de ogen. Zelf heb ik al lange tijd (waar mogelijk) mijn devices ingesteld op “dark mode”, en wanneer deze optie beschikbaar wordt binnen een app zet ik dat dan ook direct aan. Ook steeds meer e-mailclients bieden een “dark mode” optie aan.

Ik krijg echter regelmatig nog vragen over hoe het nu precies zit met dark mode in e-mail. Want: het werkt nog niet overal, én het werkt -helaas- nog niet overal optimaal. Het leek me dus goed om daar eens een artikel aan te wijden 🙂!

Een light én dark mode versie?
In hoeverre er een light mode en dark mode versie van een design nodig is, hangt ook een beetje af van de huisstijl van het bedrijf. Als volgens de huisstijl alles op een donkere achtergrond geplaatst dient te worden, dan is specifieke dark mode targeting niet nodig. Die kleuren zijn namelijk al super geschikt voor dark mode. Simpel gezegd: de achtergrondkleur is dus veelal bepalend of iets binnen “light mode” of “dark mode” valt.

Wat bedoel ik met “dark mode targeting”?

Een e-mailtemplate bestaat uit HTML code. Een onderdeel van deze HTML code is het toewijzen van de correcte styling. Dit zorgt er bijvoorbeeld voor dat een titel de juiste kleur krijgt.

Als het gaat om “dark mode targeting”, draait het om het toewijzen van de juiste dark mode styling. De standaard “light mode” kleuren worden dan dus overschreven. Stel de titel is normaal donkerblauw, dan kan ik instellen dat deze op dark mode lichtblauw wordt.

Technisch gezien wordt er een extra stuk code toegevoegd. Deze code zegt eigenlijk het volgende: als de kleurmodus van de e-mailclient op “dark” staat, geef dan de “dark mode” kleuren van de e-mail weer.

Maar let op: helaas ondersteunen nog niet álle e-mailclients (volledige) dark mode targeting.

De 4 verschillende manieren waarop e-mailclients omgaan met dark mode

Er zijn maar liefst 4 manieren waarop e-mailclients om lijken te gaan met dark mode.

  1. De e-mailclient ondersteunt volledige dark mode targeting, geen uitzonderingen;
  2. De e-mailclient ondersteunt volledige dark mode targeting, mits een kleurencombinatie (achtergrondkleur + tekstkleur) voldoet aan hun visie m.b.t. dark mode kleuren;
  3. De e-mailclient ondersteunt dark mode, maar géén dark mode targetting: de e-mailclient bepaalt wat de kleuren op dark mode zijn;
  4. De e-mailclient ondersteunt géén dark mode: er wordt dus áltijd de standaard (light mode) versie weergegeven.

Manier 1: e-mailclient ondersteunt volledige dark mode targeting

Dit betreft de e-mailclients*:

  • Apple Mail
  • iOS Mail

Wat kan er gewijzigd worden:

  • Tekstkleuren
  • Achtergrondkleuren
  • Randkleuren
  • Afbeeldingen (handig voor iconen)

Deze twee e-mailclients ondersteunen dark mode targeting zonder problemen. Alles wat je wil is mogelijk, zonder concessies te hoeven doen! Goed om te weten: als er geen dark mode targeting is ingebouwd in de code, zullen deze e-mailclients de standaard (light mode) kleuren weergeven.

Kleine sidenote: de kleur wit (#ffffff) als achtergrondkleur op dark mode pakken deze clients echter niet, maar als je daar nét niet wit van maakt (bijvoorbeeld #fffffe) is er geen probleem. Dit is visueel niet zichtbaar 🙂.

Manier 2: e-mailclient ondersteunt dark mode targeting, mits de kleuren voldoen

Dit betreft de e-mailclients*:

  • Outlook Office 365 voor Mac
  • New Outlook voor Windows
  • Outlook.com webmail
  • Outlook App voor iOS
  • Outlook App voor Android

Wat kan er gewijzigd worden:

  • Tekstkleuren, mits kleur wordt gezien als dark mode-kleur
  • Achtergrondkleuren, mits kleur wordt gezien als dark mode-kleur
  • Randkleuren, mits kleur wordt gezien als dark mode-kleur
  • Afbeeldingen (handig voor iconen)

Ik heb helaas gemerkt dat er e-mailclients zijn die in principe wél dark mode targeting ondersteunen, maar niet alle kleuren accepteren.

Laatst had ik een opdracht om een e-mailtemplate te bouwen, waarbij er een button was welke op dark mode wit moest worden, met een zwarte tekst. Die dark mode targeting had ik dus ingebouwd.

In Outlook 365 voor Mac werd de achtergrondkleur van deze button echter niet wit, maar donkergrijs; de tekstkleur van de button werd niet zwart, maar wit. Andere pogingen om toch de juiste kleuren weer te laten geven, mochten niet baten. Ook Outlook.com accepteerde de witte achtergrondkleur niet. Beide e-mail clients zien deze kleurencombinatie dus niet als “dark mode proof”.

Uiteindelijk hebben we besloten de button dezelfde kleur te laten als op de standaard light mode versie, en de kleuren specifiek voor de clients waarbij het wel goed ging (Apple Mail en iOS Mail) aan te passen.

Het lijkt er in dit geval dus op dat deze e-mailclients bepaalde voorwaarden hebben voor de kleuren die gebruikt worden. Lichte achtergrondkleuren met donkere teksten worden niet geaccepteerd. Waar de precieze grens ligt is moeilijk te zeggen. De simpelste manier om te kijken of een kleurencombinatie voldoet is simpelweg door het te testen.

Goed om te weten: als er geen dark mode targeting is ingebouwd in de code, zullen deze e-mailclients de dark mode kleuren zelf bepalen.

Manier 3: e-mailclient ondersteunt wel dark mode, maar geen dark mode targeting

Dit betreft de e-mailclients*:

  • Outlook Office 365 voor Windows
  • Outlook 2021 voor Windows
  • Gmail App voor iOS
  • Gmail App voor Android
  • Windows Mail

Deze e-mailclients passen naar eigen inzicht de kleuren van teksten, achtergronden en randen aan. Veelal worden de lichte kleuren donkerder gemaakt, en de donkere kleuren lichter. De Gmail App lijkt heel soms de kleuren van iconen (welke ingeladen worden als afbeeldingen) aan te passen.

Sidenote m.b.t. Outlook Office 365 voor Windows en Outlook 2021 voor Windows: deze e-mail clients bepalen in principe volledig zelf wat de dark mode kleuren worden, máár er zijn wel workarounds beschikbaar. Deze workarounds maken het mogelijk om de tekstkleuren op dark mode te bepalen. Het kan echter wel zijn dat een kleur nét iets afwijkt van de gewenste dark mode kleur, hier is niets aan te doen.

Ook is het mogelijk om een achtergrondkleur gelijk te houden aan die van de light mode versie. Dus stel: de achtergrondkleur van de footer is op light mode donkerblauw met witte tekst, dan kan ik het voor deze e-mailclients zo bouwen dat dat op dark mode ook zo is. Bouw ik dat niet in, dan bepalen de e-mailclients zelf de achtergrondkleur en tekstkleur op dark mode.

Manier 4: e-mailclient ondersteunt geen dark mode

Dit betreft de e-mailclients*:

  • Gmail.com webmail (let op: dark mode interface al wel beschikbaar, maar dus nog niet binnen de mails)
  • Gmail IMAP
  • Oudere versies van bijvoorbeeld Outlook voor Windows (alles ouder dan 2019)

Tot slot is er nog de categorie van e-mailclients die nog helemaal geen dark mode ondersteunen. Deze e-mailclients laten dus altijd de standaard (light mode) versie zien, ook al zit er extra code in de mail voor dark mode. Deze clients ondersteunen deze functie nog niet of zijn verouderd.

Nog even samengevat

Onderstaand nog even samengevat wat de mogelijkheden zijn van de huidige e-mailclients die dark mode ondersteunen.

= mogelijk
= gedeeltelijk mogelijk
= niet mogelijk

E-mailclient Targeting van
tekstkleuren
Targeting van
achtergrondkleuren
Targeting van
randkleuren
Targeting van
afbeeldingen
Opmerkingen
Apple Mail Wit #ffffff werkt niet, aanpassen naar #fffffe
Gmail App Android Dark mode kleuren worden automatisch gegenereerd, kleuren van icoon-afbeeldingen worden soms gewijzigd
Gmail App iOS Dark mode kleuren worden automatisch gegenereerd, kleuren van icoon-afbeeldingen worden soms gewijzigd
iOS Mail Wit #ffffff werkt niet, aanpassen naar #fffffe
Outlook 2021 Windows Dark mode kleuren worden automatisch gegenereerd, tekstkleuren zijn op een speciale manier wel aan te passen, achtergrondkleuren kunnen in sommige gevallen behouden worden
Outlook App Android Accepteert niet alle kleuren
Outlook App iOS Accepteert niet alle kleuren
Outlook Office 365 Mac Accepteert niet alle kleuren
Outlook Office 365 Windows Dark mode kleuren worden automatisch gegenereerd, tekstkleuren zijn op een speciale manier wel aan te passen, achtergrondkleuren kunnen in sommige gevallen behouden worden
New Outlook Windows Accepteert niet alle kleuren
Outlook.com webmail Accepteert niet alle kleuren
Windows Mail Dark mode kleuren worden automatisch gegenereerd

E-mail(template) laten optimaliseren voor dark mode?

In veel gevallen is het super goed mogelijk om een bestaande e-mail(template) te optimaliseren voor dark mode. Daar help ik jullie graag bij! Stuur me gerust een bericht via LinkedIn of mail naar info@denisenijland.com.

Mijn naam is Denise en inmiddels ben ik alweer meer dan 5,5 jaar e-mail developer. Als freelance e-mail developer wordt ik voornamelijk ingehuurd door bureaus om mee te helpen aan een specifiek project (zoals een volledig nieuw template of het toevoegen van een nieuw content blok aan een bestaand template); of als interimmer bij te springen bij de dagelijkse gang van zaken (van het bouwen van nieuwe templates tot losse mailings tot kleine wijzigingen).

*Er zijn natuurlijk enorm veel verschillende e-mailclients. De in dit artikel genoemde clients zijn de clients waar ik het meest mee test. Dit via Email On Acid en/of Litmus en mijn eigen Windows laptop en Android smartphone.

Mijn kennis over dark mode in e-mail heb ik de afgelopen jaren opgedaan. Favoriete resources van afgelopen jaren over dark mode: