Dark Mode is essentially a colour palette preference that users can switch to in their devices to read digital content.
This means the colours of the UI elements (buttons, menu items, etc.) and typography will be reversed, from their dark version on a white background to a light version on a dark background.
Dark Mode (or Dark Theme) was introduced in 2018 by iOS and 2019 by Android. This was soon followed by major apps such as Twitter, Gmail, Microsoft Office, and Slack.
The email world, known to adopt new features at a slower rate than most, caught up in 2020 after most operating systems offered the choice of seeing content in both standard/light and dark versions.
Now, it has become an almost ‘must-follow’ trend, but it certainly goes beyond that, and has a number of benefits when it comes to improving the customer experience.
When it comes to applying Dark Mode to emails, there are a number of scenarios to consider:
So, when it comes to choosing Light or Dark Mode, it’s not just a matter of personal preference, but also of usability and accessibility.
The Nielsen Norman Group, leaders in research-based UX, have found that low vision users (specifically with cataract and related diagnoses) perform better with darker interfaces. They also state that reading for long periods in standard (light) mode may contribute to myopia. In low-light environments or at night-time, Dark Mode minimises eye strain.
Dark Mode can also improve content legibility and make it easier for some users to perceive and engage with content on both desktop and mobile.
Another, very pragmatic reason is that Dark Mode actually helps to save battery usage. Since there are less pixels that need to be activated, the power needed is reduced.
Try to use images with transparent backgrounds (PNG files), particularly for icons and logos.
If you don’t have that option and the images you have are flat files with a solid colour background, at least try to crop them evenly, leaving some breathing space around them so it looks intentional and the spacing retains its uniformity with the rest of the email.
If you have Dark Mode alternatives, for instance a white version of the logo, use those. They can be coded in to show up only for Dark Mode in the email clients that support Dark Mode queries.
When it comes to coding, there are a few things that can be done:
1. Include this metadata in the <head> tag, so Dark Mode is enabled in the email for users that have Dark Mode switched on.
<meta name="color-scheme" content="light dark"> <meta name="supported-color-schemes" content="light dark">
2. Add this Dark Mode media query to customise your email styles in iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS) and Outlook App (iOS).
@media (prefers-color-scheme: dark ) {your email styles go here}
3. Duplicate Dark Mode styles with [data-osgc] prefix for support in Outlook app for Android. Here’s an example:
/* Custom Dark Mode Background Color */ [data-ogsc] .darkmode { background-color: #272623 !important; }
4. Apply your Dark Mode-only styles to the body of your email. Make sure you are using all the correct classes.
5. Test, test, test.
Do you know whether your customers prefer reading your emails with darker interfaces, in Dark Mode?
Are you able to elicit this information from your analytics?
Are you providing your customer with the best possible, tailored email viewing experience?
If your answer to those questions is no, then we can help.
Email clients render content in very different ways and sometimes with unexpected results. This also applies to how they support Dark Mode. And email coding is a very complex field, much less flexible than coding a regular website.
Our team of experts have years of experience designing beautiful emails that convert, as well as ensuring that you can track the data you need in your analytics to make the right decisions to improve your marketing.
Get in touch with us to learn more about how we can improve your email viewability, deliverability, and analytics. We’re here to help.
Do Business.
Better.
Want to talk?
