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…

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.
Dark Mode doesn’t necessarily fit every brand personality.
Deliverability may be affected if your email fails to render Dark Mode properly.
Dark Mode emails may lose color contrast, causing accessibility problems.
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.

The Assemble Tool Box: Build-A-Mail Interface Makes Email Development Seamless

Let’s be honest — email development is complicated. Thanks to emerging technology, we now have multiple email clients to choose from, tons of devices to consider, and an endless list of configurations and features associated with each. But what if there was a one hub that brought all the aspects of email development together with tools that automated code generation and ensured compatibility across every client and device?

The Assemble Tool Box: BannerForge Platform Streamlines Creative Development

At the core of Assemble culture is an unwavering drive to keep improving. We love to push the boundaries creatively, and we know that to do that, we have to work smarter. With the rapid development of AI technology, this focus has never been more important to stay ahead of the production game. So we research. We learn. We test. And we build. Because why should we only rely on the tools out there when we can create our own — and make them even better?

In the Spotlight… Marianella Arnaez

I’m a morning person, so I like to wake up early and walk my dogs or meditate a bit to get myself in the right headspace for the day. I’ll start by going through my to-do list (I’m a big agenda girl!) and organizing all my tasks. Right now, I am working with a big Pharma client, designing social media posts, invitations to clinical trials, guides, brochures, and anything else they need as part of their overall strategy. I create some animated videos, so I develop a lot of storyboards and create and modify each asset for different platforms and placements.

Automation vs. AI: Key Differences & Big Developments Redefining Creative

It doesn’t matter what industry you’re in, everyone is talking (and debating) about AI. While we’ve seen technology come a long way over the last couple of decades, these tools are arguably the most transformative developments of our time. But like every other new wave of technology, it’s bringing a whole new language we have to learn with it — and important differentiations that need to be cleared up.

5 Tips When Designing for Print — Or Having a Production Studio Do It For You.

The numbers don’t lie; print still has its purpose in marketing today — big time. However, the increasing dominance of digital raises the standards for print design even higher. Consumer expectations are less forgiving than ever, so low-quality, unengaging visuals simply won’t cut it. In fact, they could ruin you.

VEEVA Generative AI Tool

Big news for our Pharma friends: VEEVA is the latest digital platform to embrace AI Chatbot technology to elevate their user experience. And they’re doing it in a big way.