Dark Mode Design & Code Basics for Email Marketers

By Brian Leahy, Visual Designer

One thing that we’ve been seeing a lot more of lately? Users embracing Dark Mode on their devices. Whether they’re surfing the web on their laptop or reading an email on mobile, it’s more likely than ever that users are using Dark Mode to do it.

As an example, here’s our own monthly newsletter email viewed first in Light Mode, then in Dark Mode. Note that this Dark Mode example is from after we redesigned our newsletter with solutions for common Dark Mode-related issues.

As we’ll learn in this article, support for Dark Mode varies widely in email clients, meaning that if you don’t plan for Dark Mode, your email design may appear unintentional, unappealing, or — worst of all — unreadable for Dark Mode users.

Methods to test for dark mode usage are still being developed, but a recent test by Litmus found that 7.5% of MacOS users with Apple Mail prefer Dark Mode, and on iOS, that number skyrockets to 36%. It also seems likely that these numbers will continue to increase as companies, products, and apps continue to improve their accommodations for Dark Mode, and more users discover the benefits of Dark Mode.

Speaking of the benefits of Dark Mode – why do people like it?

• Increased Accessibility: Users with visual impairments or other afflictions like migraines may prefer Dark Mode interfaces.

• Decreased Eyestrain: Many heavy computer users find that Dark Mode reduces eye fatigue over time. Similarly, use of Dark Mode at night prior to sleeping may help reduce disruption in sleep patterns. 

• Aesthetics: Some people find that color pops on a dark background better for them, segments elements on a screen better, and/or believe that Dark Mode simply looks cooler. (Yes, ‘looks cooler’ can be valid too!)

Even if you prefer Light Mode, in 2023, it’s now safe to say that a non-insignificant portion of your subscribers prefer otherwise. And as an email marketer, you want to maximize your reach, right?

The Good News: It’s Getting Easier To Design for Dark Mode

In past years, email marketers and designers faced a bit of an uphill battle when it came to planning for how their products would appear in Dark Mode. Similarly to how email clients vary widely in their updates, bugs, and support for HTML and CSS features, planning your email template for Dark Mode hasn’t been very straightforward – and the previous low adoption rates of Dark Mode didn’t help with our motivation to accommodate for it, either. 

Nowadays, with a bit of understanding and planning, your team stands a great chance of designing an email that reaches your Dark Mode subscribers with just as much impact as your Light Mode subscribers. 

First, it helps to understand the 3 ways that email clients currently interpret Dark Mode:

1. No Changes: Some email clients don’t do anything when a device or email displays a preference for Dark Mode. This isn’t as bad as it may sound – at least your email still looks exactly the same as you originally designed it. And the user is unlikely to blame you specifically for the bright email on their screen — assuming they’re using the same email client to look at their other emails, none of those are showing up dark, either. This ‘no change’ behavior typically stems from web, desktop, and legacy email clients. Specific examples include Apple Mail and Hey.com.

Below is a visual example of Clyde Golden’s newsletter as it was originally designed – in other words, how it would look in a ‘no change’ email client. We’ll show how it reacts to partial and custom changes next.

2. Automated Color Inversions: Email clients with this behavior either partially or completely invert the colors in your email, in an attempt to make them display better for users with Dark Mode preferences. Sometimes this works decently well. But other times it can have very unexpected results. For example, if your email is originally designed with darker tones, an inversion could ironically result in your email looking bright in Dark Mode! Another unsavory scenario would be the email client choosing automated colors that lie outside of your brand’s carefully crafted color palette. Automated color inversions are the most tricky, as you’ll need to put some extra planning into assets like images and logos in order to minimize potential side effects. We’ll cover how to address those in the next section.

Clients with ‘partial inversion’ behavior include Outlook.com, the Outlook app for both Android and iOS, and the Gmail app for Android (but not iOS). The Gmail app for iOS is a good example of an email client that will perform full inversions if you have not supplied custom code instructions in your email template. 

Here’s an example of an automated partial color inversion occurring on the Clyde Golden email newsletter, before the email was prepped for such a scenario:

3. ‘Custom’ Dark Mode: Email clients that support this kind of behavior allow you specify exactly how you want your email to look in both Dark and Light modes using HTML meta tags and CSS targeting. For instance, you could specify that a separate logo better suited for Dark Mode appears when appropriate, or ensure that background colors in Dark Mode stay within your brand’s color palette.

Apple Mail and Hey.com are 2 email clients that support custom Dark Mode code in this manner, while other clients that typically exhibit automatic inversion behavior, like Outlook, may provide partial support for custom Dark Mode code. Here’s a good way to determine what you need to code for in your design: Start by testing your brand / email color palette with an email render testing service like Email On Acid or Litmus (see the final section of this article for more testing tips). Then you can design your email template and custom code instructions based on the changes you are seeing there.

Here’s an example of the same Clyde Golden email, now with custom Dark Mode code specifications and viewed in a supportive email client:

In an ideal world, all email clients would behave in the manner described in #3 above. Until that day comes, we recommend adding in all the customization specifications you’re able (in order to take advantage of them in situations like #3), as well as putting a little thought into your assets like logos and images without backgrounds, so that they still display okay in less ideal conditions (such as #2). 

Time to get down to brass tacks!

How To Design For Dark Mode In 2023

Let’s start by describing how you design for clients that support ‘Custom’ Dark Mode – #3 above. 

It’s pretty simple – your developer places code snippets at the head of your email that essentially tell supportive email clients: “Attention! If this user prefers Dark Mode, replace these specific design elements with the following different colors/files: ________”. (Non-supportive email clients will simply ignore this code, so no harm there).

Developer Tip: There are several different code approaches that address different email clients in this category, so you may choose to incorporate all of them, to cover as many bases as possible. For a more thorough look at specific code recommendations for Dark Mode targeting, we recommend Litmus’ guide here.

Then, all that’s left to do is have your designer specify the alternative colors to use in Dark Mode for elements like backgrounds, UI features such as buttons, and your typography. Your designer can choose colors that stick within your brand guidelines, while still providing an optimal Dark Mode experience. 

(BTW. there’s a great demonstration of how to test alternative colors for Dark Mode in our video: How Dark Mode Affects Your Emails + Render Testing Tips.)

A few other elements your designer should consider providing:

• If your brand logo is typically a dark color text, the designer can provide an alternative version of the logo better suited for Dark Mode. The developer can then instruct supporting email clients to display the Dark Mode version of the logo in their code when appropriate/possible.

• Header and footer elements like social media icons may benefit from a reverse color scheme for Dark Mode as well. Consider making alternative versions and implementing them in the same manner as the logo described above.

• A mockup demonstrating the intended colors, hex codes, and alternative image files (i.e. logos and icons) for Dark Mode can help ensure the developer knows precisely what to specify in their Dark Mode code.

Designer Tip: Consider using degrees of color saturation or lightness to get more mileage out of your brand’s color palette in Dark Mode. For example, Clyde Golden’s classic teal (#28565C) can be reduced to a calming mint shade (c9d5d6) that works well with Dark Mode.

Now, keep in mind that the above steps will provide an ideal viewing experience for your Dark Mode users, if their email client supports ‘Custom’ Dark Mode instructions.

How do we prepare for the scenarios where their email client doesn’t support custom instructions, and instead performs an ‘Automated Color Inversion’? (#2 in the list earlier) 

Stick to the following rules while designing your email template, and your email should still display in an appealing manner:

• Transparent backgrounds that normally appear white are typically flipped to a dark color during an automated color inversion. Thus, you’ll want to take into account any images with transparent backgrounds that you may be placing on top of transparent backgrounds. For instance, if your brand logo is a PNG file composed of dark colors and it is normally placed on a transparent background, it may become difficult to see once that transparent background is flipped to a dark color. One way to prepare for this is to add a white colored stroke around the logo, which would be invisible in normal light mode scenarios, but help the logo stand out in dark scenarios.

• Another option would be to take the logo file and add an artfully cropped white background to it before placing it back in the template. This background would be invisible in normal scenarios, but create contrast for legibility in Dark Mode.

• Avoid using HTML text over a background image. As we saw with the Home Depot example near the beginning of this article, your HTML text might be changed to a color that is harder to read over the image. If the text had been embedded in this image, its color would not have been changed, and legibility would have been maintained. 

• Avoid using text images (i.e. text embedded in an image file) with a transparent background where possible. Let’s say the text in your text image is a dark color, and your email has a light colored background. If the background color is changed to a darker one in Dark Mode, that same text may be difficult to read.

• Test your emails as much as possible. You will quickly notice where automatic color inversions are causing issues, such as in buttons, and be better able to solve for the specific scenarios causing them from there. (We’ll cover testing in the next section). 

In conclusion, start by designing for the Dark Mode look you want (#3 in the list earlier), and then test, review, and make changes as necessary to ensure that your emails will still perform decently in clients that perform Automated Color Inversions (#2 in the list earlier).

When In Doubt, Test Test Test

Like so many other things in the world of email, email client support for Dark Mode is constantly changing and growing. So your best bet is to test, review, and make changes to your email template design, and then test again whenever possible.

(Speaking of email template design, you might need to do some research regarding your subscribers. Watch our video ‘Do This Research Before Designing Your Email Template’).

Aside from reviewing your emails on as many devices in person as possible, you can use an email render testing service like Email On Acid, Litmus, Campaign Monitor, or Email2Go. These are (usually) frequently updated to reflect current email client behavior, and they can be a priceless timesaver – there’s a lot of potential device/email client combinations out there to test for.

It’s worth noting that if a Dark Mode display issue is only occurring within a few specific scenarios (for instance, on a particular older device with a particular older email client), it may not be worth your time to troubleshoot/solve for. An awareness of which devices and email clients your subscribers prefer can help you decide what is worth the trouble in such situations.

The Future Of Dark Mode

In conclusion, it’s safe to say Dark Mode is here to stay. As support for Dark Mode continues to grow, things will (hopefully) only get easier for email marketers seeking to design the best experience for their subscribers. 

In the meantime, don’t wait to dive into the Dark with the tips above. Your subscribers will thank you for it!

Have another tip you’d like to share? Drop us a note at tim@clydegolden.com, or leave a comment below.