7 Ways to Embrace the Dark Mode in Email Marketing

The dark mode is on the rise and is taking over our screens. The big players in the market are embracing the dark to come into the limelight.

With email being one of the most effective marketing channels, let’s touch base on the challenges that the dark mode brings with itself and how you can tackle them.

The concept of dark mode

A dark mode is a reversed color scheme that utilizes light-colored typography, UI elements, and iconography on dark backgrounds. Here’s what it does:

• It reduces screen brightness which saves battery life
• It minimizes the blue light to reduce eye strain
• It is ideal for people with light sensitivity, or even those who work late hours

Dark mode targets the HTML attributes and CSS properties via internal or inline styles. It adjusts them to make them darker or lighter. So, if your text is a dark color, the dark mode changes it and the background colors to a lighter tone.

Email clients that support the dark mode

While researchers and doctors are still debating whether the dark mode is healthy, users seem to have made up their minds. Here’s a list of all the big players currently supporting the dark mode:

• Gmail App Android (Android 10)
• Gmail App (iOS) (iOS 13)
• Outlook App (Android)
• Outlook App (iOS)
• Apple Mail (Mac OS)
• Outlook 2019 (Mac OS)
• Outlook 2019 (Windows)
• Outlook.com

Although all these email clients offer a way to set their UI to a dark color scheme, this doesn’t mean that they handle your emails the same way. Email rendering can be complex. An email that looks good with one client may look distorted with another. This can affect your email campaigns and brand value. There are ways in which you can use the dark mode to your advantage. Let’s see how that can be done.

Color schemes email clients use

There are 3 different types of color schemes that email clients use to apply dark mode:

1. Full-color convert (Outlook 2019 Windows; Gmail App iOS)
2. Partial color convert (Gmail App Android, Outlook Android, iOS, macOS, and Outlook.com)
3. No color convert (iOS Mail, Apple Mail)

Challenges with dark mode

• If your images are in dark colors, there may be visibility issues in the dark mode.
• If you have a light color background image and text, it converts itself in white color in the dark mode by default, decreasing its readability.

Here’s an example:

Here’s how it renders in dark mode:

Since the image is in a light color, the dark mode converts the text color from black to white automatically.

Here are the hacks to curb the dark mode challenges:

There are two ways to fix dark mode issues:

1. @media (prefers-color-scheme: dark)

OR

2. [data-ogsc] and/or [data-ogsb]

It is easy to duplicate the @media (prefers-color-scheme: dark) styles that you have already applied by simply adding the appropriate [data-ogsc] and/or [data-ogsb] prefixes to each CSS rule.

Here is a list of devices on which the dark mode media queries are supported:

When you’re applying these styles to your emails for use across email clients, keep these 7 things in mind:

1. Optimize your logos and other images for all styles: Add a translucent outline to transparent PNGs with dark text for readability where dark mode can’t be targeted, like the Gmail App and Outlook 2019 (Windows).

2. Enable dark mode in email client user agents: By including the following metadata in your “head” tag, you can ensure that the dark mode is enabled in your email:

To support that metadata, you’ll need to add this CSS as well:

3. Add dark mode styles for @media (prefers-color-scheme: dark): Add this media query in your embedded “style” section for custom dark mode styles in iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS), and Outlook App (iOS):

4. Duplicate dark mode styles with [data-ogsc] and/or [data-ogsb] prefix: If you want to change the email style for the dark mode on the Outlook App (Android), then add [data-ogsc] with .class or if you want to make changes on all dark mode devices then you can simply use .class like this:

5. Apply dark mode-only styles to your HTML body: Here’s how you do this:

6. Testing: Always test your emails for both dark and light modes. Consider how the email will look if the background color would change by adding bgcolor=”#000000” to your “table” and “body” tags or change the background to black at the design stage to see how it would look. All you need to do is to keep in mind that the white background color is not supported in the dark mode.

7. Use transparent images: A transparent image will allow the background color change to appear more seamless with the design still intact.

Use these ways to make the dark mode an ally to your email designs.

Know more about how Grazitti can help you with your dark mode woes. Drop us a line at [email protected] and we’ll take it from there.