Article

Introduction to Dark Mode

Adam Schlitt

“Dark Mode” is gaining momentum in the email space. Android Authority found that 81.9% of tech-savvy users are using Dark Mode some or most of the time they view their devices, and that number will increase as others begin to adopt it. 

This overview explains what Dark Mode is, why it is trending and how to set up your email so you can give your readers the best possible experience when they are using Dark Mode.  

The case for Dark Mode

If you want to leverage the full value of your email program, you should set up your emails to look and function well on devices that have activated Dark Mode.

On a device like a smartphone, tablet or computer, Dark Mode is a display setting that changes user interface colors. Instead of showing dark type on a light or white background, it automatically switches to light type on a dark or black background to make viewing easier in low light. Dark Mode can also change color values but doesn’t affect message layouts.

Dark Mode’s two main benefits for users: it reduces screen glare and exposure to blue light rays. That minimizes eye strain. It also can preserve mobile battery life. 

Users who choose the Dark Mode option in an email client or on their mobile device are saying, “I want to be in Dark Mode” and will expect to see emails in Dark Mode designs when they browse their inboxes.

For emails to successfully render in Dark Mode for these clients, they need to be designed and developed accordingly.

Emails that haven’t been optimized for Dark Mode can show as disconcertingly bright emails, which can hurt eyes that are used to the more restful Dark Mode tones, and prompt users to delete them without reading. That can lead to dissatisfaction with your emails and increase unsubscribes or inactivity.

By enabling Dark Mode within your email program, you show your customers you value their wants and preferences. You also avoid becoming the villain that blasts an unexpected bright white page during a late night inbox scroll.  

One other benefit: Dark Mode also gives your email creatives and developers an opportunity to showcase their creative chops and unlock some cool designs. 

dark mode for email

Getting started

Although Dark Mode has been a device feature for several years, the email response has been slow to take off, mainly because teams do not know whether the first step should come from the developers or the creative team.

We believe the creative team should lead the effort. They know your email needs better than anyone – the branding, designs, brand colors and logos. These decisions should drive technical development. 

Start by reviewing all of your email content in Dark Mode. If you have never used Dark Mode, you might be surprised to see how different your emails can look. Switch your phone to Dark Mode. (Go into your phone settings, look for screen display, and then for “dark” or “dark mode.”)

Next, review your emails in Dark Mode. Look for the areas that need to change between Light and Dark Modes. Review your images, logos, button color, and fonts. These changes will become your Dark Mode style guide for future email designs. 

When you audit your content, look for answers to these questions:

    1. Do our images have backgrounds? They shouldn’t. A white box that falls on a black background is not a good user experience in Dark Mode. 
    2. Does our logo color need to change? Swap your primary logo color to white. You can also “stroke” your logo, which is a glow effect behind the asset to prevent the need for any image swapping.
    3. Are our CTAs readable? Change the button color so they stand out against the black background. 
    4. Are our images too bright? Change the saturation between the two versions. Light Mode should have more saturation, Dark Mode, less. 

Coding for Dark Mode 

(Not an email coder? Share the following tips with your coding or development teams!)

With your style guide in hand, executing  Dark Mode from a developer’s perspective becomes a straightforward project. 

Step 1: Adjust the 2 proper meta tags up in the HEAD of your HTML. By doing this, you can ensure that Dark Mode is enabled for any users. This is how the code can identify whether your subscribers have dark mode enabled on their device.

<meta name=”color-scheme” content=”light dark” />

<meta name=”supported-color-schemes” content=”light dark” />

Step 2:  Add the Dark Mode @Media query in your CSS. It is similar to an @Media query that you use for a responsive view. All your classes that apply to Dark Mode will go in there. Be sure to include your [data-ogsc] rules for Outlook as well:

@media (prefers-color-scheme: dark){

.darkBG{ background-color: #1E1E1E !important; }   ← STANDARD CLASS
{data-ogsc] .darkBGMSO{ background-color: #1E1E1E !important; } ← OUTLOOK CLASS }

Step 3: Add your classes (.darkBG, .darkBGMSO) on the proper TDs, THs, IMGs, DIVs  and TABLEs as needed. 

<td class=”darkBG darkBGMSO” align=”center” … >

You can determine where it is needed by running tests on your email without the classes/rules for Dark Mode there.

Maintaining Dark Mode across email clients 

Although Dark Mode has many benefits for the user experience, it also has a couple of challenges across email clients.

Build a step in your workflow that reminds you to review your emails periodically in Dark Mode if you typically view them in Light Mode. You need to maintain and possibly update your code as more email clients begin supporting it. 

And, as always, some email clients follow different sets of rules in interpreting and displaying content in Dark Mode. 

You can target Dark Mode in iOS and Outlook. Outlook uses a different mathematical algorithm to come up with its colors for Dark Mode, so you might see some difference in colors and need to adjust as needed.This is where your Dark Mode style guideline will come in handy. 

Gmail users can force Dark Mode in their browsers. This can create a poor user experience if your templates are not built for Dark Mode. Designing defensively, using the techniques we listed above, can counter these issues and make your emails ready for any environment–light or dark. 

Wrapping up

Dark Mode is a user-experience feature that is becoming more accepted. As we noted in our introduction, many tech-savvy Android users prefer it to Light Mode.  A Google developer found similar results for iPhone users

If you haven’t investigated Dark Mode as a service for your customers yet, look for ways to incorporate it into your email program in 2021. 

Trendline Interactive’s creative team has cracked the code on creating emails that render well in both Light and Dark Modes. We’d love to help you get started! Just reach out to us, and we’ll take it from there.

About the Author(s)

Adam Schlitt

Born and raised in Kitchener-Waterloo, Ontario, Canada, Adam studied Web Design at Conestoga College. He’s been with Trendline for 1 and a half years, but in the email game for nine years. Lover of music, from Heavy Metal to Folk music. Hosts his own Heavy Metal Charity show and volunteers at a yearly Folk Music Festival.

Let's Take This to the Inbox

Sign up for our news, resources and updates. The inbox is our favorite place after all. We’ll make sure it’s worth it. (You can unsubscribe at any time, but you probably already knew that.)