16 MAART 2023

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.

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 🙂.

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.

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.

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-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.