Are You Afraid of the Dark Mode?
Written By Krystyna Malewski Associate Director of Technology
Spooky season is upon us, but is Dark Mode for emails really as scary as it seems? With its growing popularity and availability on mobile and web applications, we decided to take a deeper dive into what it is, who’s using it, and what it means for email marketing.
What is Dark Mode?
Dark Mode is an accessibility setting that allows users to swap the display of their interface to have a dark background and a light foreground to help reduce the amount of blue light emitted from devices. As one of the biggest trends in UI this year, most popular applications and operating systems are rolling out some version of Dark Mode. Instagram, Facebook, Twitter, and Slack are just a few of the applications offering their users the ability to go dark.
Who’s using it?
Vampires aren’t the only creatures that prefer darkness, and depending on your audience, you may need to jump on this new trend. According to Email on Acid, if your subscribers are developers, programmers, or technology enthusiasts, you can suspect that their inboxes are dark. For them, Dark Mode is not a new trend, but how many of them have always worked, so it makes sense that they would prefer to read their emails in a similar fashion.
Many young people are also transitioning over to the dark side. First of all, Dark Mode is the new black (literally); it just looks cool. By reducing screen brightness, it can also help extend battery life on some devices. Is there anything scarier than a dead phone?
Some other adopters of Dark Mode may be migraine sufferers and night owls. The bright blue light emitted from devices can strain eyes, triggering headaches as well as making it more difficult to fall asleep. If you are one of the few people who actually follows medical advice and isn’t scrolling through your phone two hours before bedtime, we commend you. For the rest of us, Dark Mode is here to help.
What does Dark Mode mean for email marketing?
Whether or not you’re ready to turn off the lights, Dark Mode looks like it’s here to stay and has introduced some new spooky challenges for email marketers.
“Dark Mode” differs from client to client
This is one of the trickiest issues for designers and developers when it comes to emails in Dark Mode. Most popular email clients now offer some form of Dark Mode, but they all mean something slightly different. Some clients offer a dark UI while leaving the contents of emails unchanged, while others partially or completely invert colors within the emails.
MacOS Mojave and iOS13 both introduced a Dark Mode that carried into the UI of Apple Mail on both desktop and mobile. While plain text emails viewed in Dark Mode will be inverted, HTML emails or plain text emails with an image of at least 2x1 pixels will render normally.
Other clients such as Outlook.com, Outlook 2019 (MacOS), Outlook app (both iOS and Android), and Gmail app (Android) render HTML emails with a partial inversion of colors. Their algorithm will darken some background colors depending where they fall on the spectrum.
The spookiest form of Dark Mode occurs in Outlook 2019 (WinOS) and in the Gmail app (iOS) with a full inversion of colors. The intrusive and unfortunate behavior here is that these clients don’t just invert light backgrounds to dark—they actually invert already dark backgrounds to light.
Dark Mode doesn’t work with brand styles
Even if you’re attempting to embrace the dark side and design and develop emails to meet your users’ schema preferences, brand styles don’t always have a “dark” option, so this can prove troubling for some. Even more challenging are the cases of partial or full inverting of colors where the developer has no control, often resulting in colors that are completely off-brand.
Rethink how we design and develop emails
Although these things may seem a little scary, our goal as email marketers is to deliver the best possible experience to our subscribers, including their preference in schema. Here are a couple tricks and treats for you to use when designing and developing email campaigns with Dark Mode in mind.
Targeting designs specifically for Dark Mode
Similar to how the @media query can be used for responsive mobile design, @media (prefers-color-scheme: dark) works to target styles for devices set to Dark Mode. This allows for a lot of flexibility, such as updating colors or swapping out images to create a design specifically for Dark Mode. Unfortunately, this does not have support across all clients and currently only works in Apple Mail (macOS and iOS), Outlook (macOS and iOS), and Outlook.com. The big hitter, Gmail, is missing from this list and provides no ability to control for Dark Mode styles.
Using transparent images
Though colors are changed in Dark Mode, images won’t be touched, so avoid adding background colors to images that would render awkwardly with a change in background color.
Use icons/logo colors that render well in both light or Dark Mode or add a stroke around dark icons
Transparent images may help in most cases, but when dealing with dark logos or icons, they might end up disappearing into the background. To avoid this, use logos/icons in colors such as gray that will render well on both light and dark backgrounds. When this isn’t possible, add a stroke around the image so that it will stand out on a dark background.
Don’t mix images with background colors
Asymmetric designs are often achieved in emails using a mixture of background colors and images. This should be avoided moving forward, as the background color will change in Dark Mode but not the image itself, resulting in a disjointed design.
Be careful with background images that have text over them
Since the text color may be inverted in Dark Mode, the color contrast ratio between the background and text could make the email difficult to read.
As scary as it may seem, Dark Mode doesn’t have to be a grave problem. Keep these tips and tricks in mind when designing and developing, and don’t forget to test your emails to make sure they look BOO-tiful on all clients!