How to code and design email newsletters for Dark Mode - welcome to the dark side

One new trend in email marketing that excites me despite the lack of a proven fix is the Dark Mode.

I love it because I spend so much time in front of my computers' bright screens that is feels like a true eyes relief when I get to check my emails in a dark theme. Or checking Youtube in Dark Mode for that matter. It's also a great way to save some energy bills home and why not, to use less battery juice on my phone contributing to less times when I need to charge it. And lastly but equally important, it will lower the blue light causing less strain on the eyes. 

The new high contrast mode is currently fully available only for a handful of email clients like Outlook app, Office 2019 and Apple Mail. For Android users is currently working only in Android 10 which is only rolled out on Google Pixel and maybe some other few devices so far I know. However things could change at any moment, some apps dropping it, some other new ones implementing it. At the time I wrote this, there is no way to turn Dark Mode in Gmail app on mobile phones. Same thing with Outlook 360 desktop app in my Windows 10 - couldn't find any buttons like the ones below to change to Dark Mode.

iOS users could change everything to Dark Mode in the latest iPhones' settings but only the apps supporting Dark Mode will work with this new feature.

This is how you can toggle between Dark Mode and Light Mode in Outlook:

Dark Mode is often referred to as color inversion but that is not really accurate. To be a true color inversion means to have the text automatically changed to a lighter color to retain the contrast since the background changes to dark. But unfortunately is not what is happening. The text remains black if it's styled that way which make is very hard to read if not completely blending in with the newer darker background. 

Funny enough I'm forced to use a slightly different color for links, usually changing the last digit in the hex code for links so they don't become blue in some email clients (e.g. I use #000000 for the TD style and #000001 for the links inside that TD) and yet this new Dark Mode feature screws up completely the user experience with a flick of a button in some email clients or is even being rolled out as the default mode in others.

So far we know at the moment is that MacOS Mojave's Dark Mode is changing the background to darker color for text only emails so regular coded email newsletters with images are not affected. On the other hand, at least based on my testing it looks like all emails are affected and the background gets changed in Outlook.com and the Outlook app - or at least on my Samsung phone.

The way it works in Outlook is that if you define the text color (and you do that 99.99% of the times, unless you forget which you shouldn't since you have to be always specific in email development), Microsoft will adjust the new text color to have some contrast comparing to the new darker background which is by default as dark as #333333. 

See how Outlook changes the titles color on my Samsung phone so is readable when the background becomes darker in this Digg email:

Similar to Microsoft, Apple’s dark mode makes it possible for the users to choose a dark system-wide appearance so it's not only the email area changed but everything changes in a darker color palette including buttons, text, panels, etc. If you only want the dark mode at night, you can set it out so it changes to high contrast only when the light becomes dim. Automation. Love it!

MacOS Mojave’s Dark Mode Colors are the following:

  • Background color: #2d2d2d
  • Text color: #dfdfdf
  • Link color: #1b89ef

As I mentioned before, Gmail has not implemented Dark Mode for Android users using older versions than 10.0. On my Samsung, the dark theme for Gmail is only available when I open my Gmail on my computer web browser and it only affects the user interface and not the email newsletters I receive.

OK, so now since we know what Dark Mode is in email newsletters and what email clients are affected by it, let's look at how can we code and design email newsletters so they look great when the user changes to Dark Mode.

Design tips:

  1. Test your design in both light and dark mode
  2. Use light colors for buttons backgrounds to contrast better with dark background
  3. Start playing with darker backgrounds in emails so when changed to Dark Mode, the newsletter won't look that different - use light color text and darker backgrounds as much as you can
  4. Use transparent images (see image below for some example of Microsoft emails in Outlook.com) but test for images with darker elements i.e. social media icons on grey background or with grey font color
  5. Put a white stroke on your black font for images or icons - this could affect branding so make sure you don't change the design against the brand guidelines

Take a look at the Microsoft logo using transparency in this email I received not long ago, comparing to an older email where the logo is not transparent:

And the old email - check out the logo:

Also if you are wondering why the email looks almost normal, no dark background for the body of the email, it's because they used images for everything - including for the preheader text unfortunately. And of course the logo without transparency looks pretty bad as well. Keep this in mind though, the old email might be from before they rolled out Dark Mode hence the newer emails look pretty decent with or without Dark Mode turned on.

Coding tips:

If changing images to transparent PNGs and modifying the email design is out of question so the only option is to target the Dark Mode through coding, there is some light at the end of the (dark) tunnel. There is a media query, prefers-color-scheme that email developers like me and you could use to target the Dark Mode:

<style type="text/css">
   @media (prefers-color-scheme:  light) {
    html {
        background: #FFFFFF !important;
        font-color: #000001 !important;
        }
    }
</style>

Use the conditional comment I mentioned above to manipulate the Dark Mode user experience to your liking. However, it's nice to give users the options to customize their UI the way they wish - if they want Dark Mode let them have it. Instead of that, change the elements in the email so the newsletters they get from you are always easy to read and look great

This guy says here that by replacing the images in the email with table cells with background images should prevent ESPs from applying the dark mode but using background images in newsletter is not only a huge pain because of the tricky implementation but it may not even work in some email clients.

Will keep and eye out and see what's new in the light of the Dark Mode implementation (pun intended) while also looking for new ways of coding so the users get the best experience possible.

Till then, happy email coding! Your friend, the email snob.