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

Digital Booths

How Digital Booths are Redefining the Tradeshow Experience

When the entire world went remote, in-person events had to get creative. Presentations, celebrations, social activities, team bonding, networking — everything went virtual. Or at least they tried to. Trade shows were no exception. But how can a pharma vendor possibly be as effective through a computer screen as they would with an in-person interaction?

James Chester

Delivery Sessions Interview with James Chester, VP of Global Business – Data, Technology & Product, Starcom

In today’s evolving digital space filled with endless problems to solve and boundless data to collect, simplicity is key. But according to James Chester, VP of Global Business – Data, Technology & Product at Starcom, finding simple solutions to complex problems is the biggest challenge for marketers. And now, as increasing regulations create even more barriers, the opportunity for game-changing innovation is here for the taking.

Veeva

Why More Pharma Companies are Moving to VEEVA and How We Can Help You

Innovating new ways to enhance customer engagement has never been so popular. And in the life sciences field, it’s never been more important. And that’s why you may have noticed the industry is moving towards unified platforms that help simplify and streamline all the approvals and compliances that can complicate the customer experience.

Don’t Get Deleted: Email Marketing Tips for 2021

Don’t Get Deleted: Email Marketing Tips for 2021

In a crowded digital space, making meaningful connections through email marketing is no easy feat. But with 91% of online consumers using email every day, it’s crucial to your strategy. Check out the top email marketing tips for 2021.

Get in Touch