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.