Putting the Spotlight on Dark Mode for Email

Putting the Spotlight on Dark Mode for Email

Dark Mode. It sounds pretty cool, but what actually is it? The radiating trend that’s taking over inboxes, apps, and browsers is also creating new challenges for marketers — especially in email marketing. But since Apple, Gmail, and other industry heavyweights added this setting to their email client, the virtual customer experience has been taken to a whole new level. So there’s no resisting it any longer… it’s time to come to the dark side.

Ready to dive in? Here’s everything you need to know about Dark Mode in emails.

What is Dark Mode?

Dark mode is an accessibility setting that shifts the interface’s color palette to display content in high contrast using dark background colors and light-colored text, icons, and IU elements. The reversed color scheme minimizes blue light and enhances readability to deliver a soothing experience to the eyes, which is ideal for people with light sensitivity or those who work at night in a low-light environment.

As our daily screen time continues to get longer and our inboxes get a lot fuller, dark mode helps make content a lot more legible, allowing us to consume more content with less eye fatigue while reducing battery life on whatever device you’re using. Dark Mode also offers a classy, upscale feel which can be just as important to your content strategy — or more, depending on how you look at it.

How it Started vs. How it’s Going

Apple led the way, introducing Dark Mode on its 15th release of desktop Operating System, macOS Mojave, in September of 2018. Gmail then followed in September 2019 by launching Dark Mode for Android, iOS devices, and even iOS Mail, all in the same year.

By November 2019, 95% of users reported they prefer Dark Mode over Light Mode (Polar). Now, 91.8% of people use Dark Mode whenever available (Android Authority).

As the trend continues to make waves, more and more email clients are offering Dark Mode — either as a manual setting or through automatic detection of user preferences. Check out the growing list:

Mobile Apps

  • iPhone Mail
  • iPad Mail
  • Gmail App (Android & iOS)
  • Outlook App (Android & iOS)

Desktop Clients:

  • Apple Mail
  • Outlook 2019 (Mac OS & Windows)

Web Clients:

  • Outlook.com
  • Hey.com

What it Looks Like:

What it Shouldn’t Look Like:

Bringing to Light the Challenges of Dark Mode

Why isn’t everyone embracing this unstoppable trend? Well, there are a few hurdles holding some marketing teams back. Here’s what you need to know…

  1. Email clients render Dark Mode emails in three different ways:
      • The Complete Switch
        Desktop, web, and legacy email don’t change anything in the email regardless of the mode.
      • The Tricky Middle Ground
        Partial Color Inversion of Outlook.com: Only the light background and dark text are reversed, while all other elements remain the same.
        Full Color Inversion for Windows: All colors of the email are inverted. So if you send an email with a dark theme using Dark Mode, it might actually become light-themed. Ironic, we know.
      • The Fully Customizable
        The advanced Apple Mail enables developers to customize various elements of the email — like font colors, visuals, and backgrounds — for both light and dark modes with the help of CSS.
  2.  Dark Mode doesn’t necessarily fit every brand personality.
  3. Deliverability may be affected if your email fails to render Dark Mode properly.
  4. Dark Mode emails may lose color contrast, causing accessibility problems.
  5. Even though Dark Mode is generally believed to improve readability, that may not be the case for every user.

Enlightening Design Tips & Coding Rules
*reference this Infographic for full coding details 

  • Include metadata to enable Dark Mode
    The first step is making sure subscribers have the Dark Mode setting turned on. You can do this by including a specific metadata code intag.
  • Include Dark Mode styles for @media (prefers-color-scheme: dark)
    Write this media query in your embedded <style> tags to customize the Dark Mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), and Outlook App (iOS).

    And use .dark-img and .light-img classes to remove outline from logos in the email.

  • Use [data-ogsc] prefix to duplicate Dark Mode styles
    These codes will allow email compatibility with Dark Mode in Outlook app for Android.

  • Include Dark Mode-only styles to the body HTML
    Your HTML tags must have the correct Dark Mode classes. 

The future of email marketing is very bright thanks to Dark Mode. But to make sure you deliver a flawless experience for your customers, you’ll need to know what email clients your subscribers are using and understand how your design will be received. If you have any questions, contact the experts at Assemble to discuss your email marketing goals.

All of this great info and more is detailed in Email Uplers’ awesome In the Limelight ‘Dark Mode’ in Emails Infographic.

More Posts

In the Spotlight: Jose Montealegre

In the Spotlight: Jose Montealegre

My day starts with a cup of coffee as I hop on my computer to check emails and get caught up on anything from the night before. Then we’ll have our daily status call to see what needs to be done, and spend most of my day checking automation and testing our client products. But as our QA leader, I’m also very committed to fine tuning our process as a whole. That means continuously researching best practices and industry updates to make sure we keep improving how we approach QA as a company.

Video Trends

6 Video Marketing Trends Dominating Screens in 2022

It wasn’t too long ago that social media was just for the cool kids. A place for sharing photos with friends or staying in touch with family. But it’s quickly become an integral part of our lives — and our businesses. As technology has evolved in ways to keep us ever-connected, brands have been forced to get more social too. No longer does being on today’s top platforms keep you in the loop, or even give you an edge; it’s essential to stay alive.

Social Media Trends

The Benefit of Being a Social Butterfly Brand + 5 Top Social Media Trends in 2022

It wasn’t too long ago that social media was just for the cool kids. A place for sharing photos with friends or staying in touch with family. But it’s quickly become an integral part of our lives — and our businesses. As technology has evolved in ways to keep us ever-connected, brands have been forced to get more social too. No longer does being on today’s top platforms keep you in the loop, or even give you an edge; it’s essential to stay alive.

Bionic Reading

How Bionic Reading Could Transform Type Design

Thanks to good old technology, everything is getting faster. As a consequence, attention spans are dwindling quicker than you can finish reading this sentence. If we haven’t lost you yet, you’re about to see why the wording of that sentence was important.

Get in ToucH