Dark mode activated. Now what?
By Justin Barraclough, MarTech Director
We’ve all been there, late at night or first thing in the morning, haphazardly scrolling through our phone, liking, commenting, following, unfollowing — all with one eye open, gripping our pillow tight, because the brightness of that screen is just too much to bear. Finally, after a few too many nights and mornings like this, we decide enough is enough and trek through our phone settings and discover the button of all buttons: dark mode. And with one toggle, we’re back to using both eyes.
Dark mode has become an essential part of the UI environment for developers in recent years. This has largely been inspired by consumer demand, surely in the wake of events like the ones described above. The juxtaposition of light text and other interface elements on dark backgrounds has been shown to lessen eye strain, improve device battery life and even increase productivity at night.
But how does dark mode affect content creators, and how can they best tailor content to users who’ve already migrated to the dark side? Let’s take a closer look.
Google Search with dark mode enabled on Chrome
How to best create and design content for dark mode
First things first: the actual background color. You don’t necessarily have to put white text on a black background. Google Material Design actually recommends a dark gray background (#121212) as the primary surface color because it offers less contrast than white-on-black (high contrast can also cause eye strain, even in dark mode). What’s more, it’s easier to see shadows on a dark gray background, which allows for a broader expression of color, depth and elevation.
From there, consider text colors without saturation and with lesser contrast for maximum readability (and user comfortability). Using different “on” colors (e.g. a darker white) can also help reduce eye strain. Apple Developer Human Interface Guidelines note that pure white can vibrate against dark backgrounds, which decreases legibility and increases eye strain.
And, of course, you need to test. Design content for both light and dark mode and compare and contrast the two. See how both options look in the light of the day, after the sun goes down, next to light sources or in bed with one eye open. If you’re designing websites and apps, it’s also a good idea to give users both light and dark options and the ability to toggle back and forth between them.
A couple things to keep in mind...
While dark mode seems ubiquitous at this point, it’s important to note that while most popular email clients support it, some will automatically choose how dark mode displays the email.
And remember, different colors evoke different emotions. Just the words light and dark evoke different feelings as you read them. It’s best to lean into those reactions when creating content with dark mode in mind.
How we’re working with dark mode
From a marketing technology perspective, we’ve started to look at emails in dark mode as part of our testing process.
Our primary focus is on content legibility across email clients and adjusting if necessary. With the variety of ways email clients handle dark mode, we’ve tried to maintain the email’s original design where possible. We’ve also used transparent PNGs where applicable to maintain consistency with live text background color.
It’s important to emphasize, though, that there are no current dark mode standards, just preferences and recommendations from companies like Google and Apple. As we design for dark mode more, we’ll continue to refine our own preferences and provide our own recommendations based on our tests and experiential learnings.