Email Design Tip – How to Optimize Your Emails for Apple Dark Mode
Apple’s 15th release of its desktop operating system, macOS Mojave, comes with a prominent new feature: Dark Mode. Dark Mode relies on a darker color palette for all windows, views, menus, and controls, making the interface more suitable for work in low-light environments or at night. Subscribers can use Dark Mode as the default email interface mode and choose options to get Macs alternate between Light and Dark Mode automatically, as per the time of day when they are checking emails.
Dark Mode presents the dark theme, as the name implies, for most of the desktop apps, such as iTunes, Finder, Apple Mail, Photos, etc.
How Does Dark Mode Impact Email Design?
Good news: Dark Mode does not impact HTML emails by default. Dark Mode theme gets applied to personal as well as the plain text email versions. Even if you do not have a background color defined in your HTML email, the background is still rendered as white. So you don’t have to worry about Dark Mode messing with your code or rendering experience for regular HTML emails out of the box.
Remember that The email backgrounds in bright colors may create a discomfort experience for email users in Dark Mode. Having emails that switch from being dark to light (and vice versa) is exhausting to the eye and makes for a subpar reading experience for the subscriber.
Inconsistent Rendering Across Apple Mail And Safari
What’s odd is that Apple Mail’s behavior in Dark Mode doesn’t match that mode in Safari. If developers have not chosen a default background color for their website’ layout, Dark Mode can be applied automatically as its default dark mode background in Safari thus, making the rest of the webpages of the site appearing in dark mode. Hence, website designers may face a bigger hiccup than email designers.
How Can We Optimize the Email Designs for the Dark Mode?
To begin with this, email designers will face this challenge as they will not be able to target Apple Dark Mode using CSS. Dark Mode provides new user settings that are not supported by universal standards.
This has triggered a massive discussion around the necessity for media query support for dark themes. Apple is in the process of working with a private API that can apply the Dark Mode.
However, Apple is being cautious about exposing anything as they want to work to create a universal standard:
Microsoft has already introduced this vendor-specific media query that describes whether an application is being displayed in high contrast mode:
Alternative Ways To Optimize Your Emails For Dark Mode
But here is one of the good news for email designers. Though they cannot target Apple’s Dark Mode users so far, that doesn’t imply that designers will not be able to optimize the reading experience in the Dark Mode.
Email designers are recommended applying background colors specifically other than white to make their emails stand in both the dark and light mode.
Plus, we can optimize our email designs by creating a Dark Mode or accessibility switcher with WebKit targeting that lets users toggle between a light or dark design.
You can send yourself a test of the above code in Dark Mode to play with. The simple premise is you use a checkbox that changes the background and text color styles depending on whether it is toggled or not. This type of interactivity is supported primarily in Apple Mail, iOS Mail, and Outlook for Mac, which accounts for ~42% of the global market share currently.
Here are macOS Mojave’s Dark Mode Colors Examples:
- Background: #2d2d2d
- Text Color: #dfdfdf
- Link Color: #1b89ef
So, given those values, we can create an interactive switcher that changes our design to use a background of #2d2d2d to match the rest of Apple Mail’s Dark Mode design along with the text colors which Dark Mode uses or optimize with other colors to make it look great.
Thus, the user gets the options and preferences whether they will choose a default dark or light themed email display. Imagine a subscriber setting their theme preference in your app or newsletter settings, which gets stored in your ESP, and then gets served as the default theme for all future emails. I’m personally excited and hopeful that we will see this level of personalization stem from this environment. Granted, this approach isn’t entirely bulletproof (nothing is with email), as users could open in another app for instance, but it at least takes their preferences into account (this also highlights why we need support for targeting dark modes).
Developing a light/dark theme switcher really isn’t that much overhead or investment and is a scalable implementation if done properly. Creating a high contrast version of your emails is something marketers must be considered for the design irrespective of the Dark or Light Mode. Many won’t take the time to optimize for it, but it’s going to separate the bad/mediocre/good from the great. World-class brands and email marketing teams will support Dark Mode.
So, what do you think of email design optimization for Apple’s Dark Mode? What should be your top priorities, strategies or ideas? Share your unique ideas and suggestions with us and fellow marketers to start a discussion on best design strategies for light and dark theme switcher on Apple.