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

Client Modular Website Case Study

When a multinational hospitality company needed a quick turnaround on a new website for one of their new locations, they came to Assemble. To accommodate the tight production deadline, in addition to ever-changing rates and amenities, they needed a site that gave their team the ability to add updates, make edits, and create new pages — without any coding or development expertise.

Assemble 2023 Digital Outlook

Assemble 2023 Digital Outlook

Another year of exciting changes in the digital world has flown by. But if there’s one thing you can always count on in an ever-evolving industry like ours, it’s that Assemble will have you covered every year with all the latest and greatest updates for marketers in our annual Digital Outlook blog.

So as you prepare for a successful 2023, we invite you to check out 12 of the top trends you’ll see making a big impact this year — and you should start taking advantage now.

Why are Website Audits Important for User Experience & Performance?

Why are Website Audits Important for User Experience & Performance?

No one is telling you that you need a website anymore. We all know that. But simply having a website isn’t good enough now. In today’s fast-paced, ultra-connected digital world, consumers have very high expectations when they visit a site. They’re not going to put up with slow-loading pages or error messages. They’ll be on to the next.

Eye-Catching Animations: Tips & Examples that Bring Banner Ads to Life

Eye-Catching Animations: Tips & Examples that Bring Banner Ads to Life

We love animated banner ads. They’re fun, they’re eye-catching, and they can deliver a lot of great info in a quick, engaging way. And your audiences love them too. In fact, eMarketer reports that the click-through rate on rich media banner adverts is 267% greater than their static counterparts. So when you use them the right way in the right places, it can do wonders for your overall marketing goals.

In the Spotlight: Jimmy Gonzalez

In the Spotlight: Jimmy Gonzalez

For me, every work day starts at 5am — thanks to a 14 year old son, Joshua, and a 10 year old daughter, Abigail. First things, first is getting them up and ready for school in the morning, followed by cleaning up the house. I like to keep things neat and tidy so I can’t start my day until the mess is gone.

Get in ToucH