Nowadays being an email marketer means so much more than just creating a wall of text, adding a pretty picture, and hitting “send”.
It means being on top of news, updates, and changes, having basic psychology and behavioral knowledge, and most of all, recognizing when something is on the rise. If you are keeping up with the latest email marketing trends you are aware of the increasing interest in dark mode. Many people, including me, enjoy the option of having a dark background. However, this poses a dilemma for email marketers, because while using the dark mode is fun, designing your emails for it - not so much.
Table of Contents
- The trend on the rise
- Is this the mode you are looking for?
- Different clients, different dark modes?
- How to design emails for dark mode?
- Targeting dark mode in email clients
- Conclusion about dark mode email marketing
The trend on the rise
It seems like everybody who is anybody talks about the dark mode. Since 2019, all the industry leaders like Google and Apple and even Wikipedia publicly expressed their support for this feature. That puts email marketers in a difficult position, as optimizing for light and dark environments is not an easy task. But what is dark mode for email exactly?
Simply put, dark mode - also called a light-on-dark color scheme, is a way of displaying information using a light font and imagery on a dark background. It wasn’t very popular. The dark-on-light color scheme simulated ink on paper and was an easier transition between the media.
However, with time, many articles pointed out that dark mode saves battery and is easier on the eyes. It seems like a logical conclusion, as many people turn down the brightness on their devices when it’s darker outside, due to their eyes hurting. The energy consumption was the main reason that companies started adding dark mode. The first one to do so was Microsoft, by adding a dark background to Windows Phone 7. After Google confirmed in 2018 that dark mode saves battery, other companies jumped on this train. And if products on which you can read emails have this option, so should the email itself.
Now, dark mode is the hottest new thing after email automation, and ignoring it would be a major mistake. You might ask - why? Why should you care about dark mode? Well, the main reason is accessibility. Do you think your recipients will switch their whole UI setting to read one of your emails (that would be only light mode optimized) or will they simply stop opening them? Even worse - unsubscribe? If you don’t have cutting edge, revolutionary content you can bet the latter. So, in order to not lose subscribers, it’s your duty to figure out this whole dark mode for email issue the online industry threw at you.
Is this the mode you are looking for?
As with everything that gains major popularity, there are two camps on opposite sides of the field. Some are completely supporting the usage of dark mode, and some are against it. People state that dark mode doesn’t make any difference. Many also argue that dark mode is actually not that good for you. Then, there are all the fan clubs saying that it makes their eyes rest and it saves battery life. So, what is the truth? Let’s explore those claims to know once and for all if the dark mode is really better.
Dark mode for email saves battery life
The first, most basic claim is that dark mode actually uses less battery life than the dark-on-light option. That is only partially true - it all depends on your type of screen. Phones with OLED screens work differently than traditional LCD screens. OLED screens can benefit from dark mode and that’s because they are built differently. With this type, each pixel lights up individually. It means that the black pixel is deactivated - so it doesn’t use up the battery. Up until recently, OLED wasn’t as popular, but in iPhone X and newer Android models, the dark mode can indeed help with saving battery life.
Dark mode email is better for the eyes
Ever since our Internet fits in the palm of our hand, various researchers have been trying to figure out the strain that staring at a screen gives us. In 2018, there was a study on digital eye strain that proved over 50% prevalence among computer users. And that is not good news. This condition can cause major headaches, apathy, and sharp pains. Even worse, it seems that nobody is truly safe from it. Nowadays, a lot of people work online, staring at their computer for 8 hours. Then, as soon as the work is done, they turn on their private electronics and spend another few hours in front of the screen.
So, when the claim that dark mode can actually help with this condition came to light, everyone was eager to test it out. However, there is no scientific proof that dark mode actually helps with digital eye strain. Sure, dark mode is definitely less jarring when used at night or in a badly lit space, and designing emails for it makes them look easier on the eyes. But it can also cause users to spend more time on the application.
Email marketing dark mode is better long-term
We did mention just now that dark mode doesn’t really help with digital eye strain, however, there’s been claims that it can be beneficial if used consistently. A recent study made by Nature.com indeed proved that although there is no visible difference while using different shades short-term, dark mode is actually helping with a condition called myopia (inability to see far objects clearly). The researchers tested two groups and measured the thickness of their choroid to establish if it changed. The thinning of this part of the eye is related to myopia.
This study proved that although performance might be better when using the light mode, the dark mode has considerably better long-term effects on the eye. In conclusion, if you're designing emails for the dark mode theme you are essentially helping people out on a long-term basis. Since you know, everybody reads their emails almost daily.
Dark mode makes it easier to read
I’m sure you’ve heard that one. The email dark mode is easier on your eyes, which means that it has to be better to read with it. However, the truth might be disappointing.
It turns out that people are far more used to black text on a white background, maybe due to the fact that before reading news online, you did it with a newspaper. However, a study conducted in 2013, proved that positive polarity is better for focus and performance in younger and older users. It’s simply easier to adjust to the white background as it is to a dark one. Users put more effort into concentrating when the letters are white. They also had a harder time proofreading and spotting mistakes.
This, however, doesn’t mean that everybody will find light mode better to read. There are various studies confirming that dark mode can be better for visually impaired people and for people suffering from light sensitivity. Therefore, reading a text can be much easier for them, and designing emails for dark mode help online marketing feel more inclusive.
Different clients, different dark modes?
Currently, all the mainstream email clients have an option to toggle dark mode. The problem is, that they offer their services on various devices, and you won’t find dark mode on every single one. Here is where dark mode is available:
Mobile Apps
- Gmail App (Android)
- Gmail App (iOS)
- Outlook App (Android)
- Outlook App (iOS)
Desktop Clients
- Apple Mail
- Outlook 2019 (Mac OS)
- Outlook 2019 (Windows)
Web Clients
- Outlook.com
There is another catch. Not only dark mode is available in selected devices it can be displayed differently depending on the provider. This means that the design of your email will change depending on which service the user utilizes.
No color changes
Some email clients give you the option to change the UI to dark mode, but they don’t make any changes in the email itself. It means that email will look exactly the same no matter the app setting.
This option is possible in iOS and Apple Mail, so if most of your recipients are using this email client, you basically don’t need to optimize your emails to dark mode. There is one exception though. Plain-text emails will trigger the change to dark mode. Keep in mind that in order for email to stay in light mode you need to have a 2x1 pixel size picture.
Partial color change
This one ensures that all the light elements of email are turned dark. But dark text will also turn light to ensure readability. However, other dark elements will not be changed. This can be observed in Outlook.com.
This one seems the smartest way to switch emails to dark mode, but it can have catastrophic effects on your logos and branding. With some of the colors inverted, your brand consistency might be at risk. Furthermore, this mode requires a bunch of testing to make sure your colors are not too light to be inverted or too dark to get lost in the dark background.
Full-color change
The most invasive one, very difficult to navigate and sadly one of the most popular ones. Full-color change is used in Outlook 2019 and Gmail App on iOS, which are two of the main email clients online.
This invert is full. It means that light elements will become dark, but dark elements will also be inverted. This one is tricky and requires a lot of testing to make sure your email is readable and consistent with your brand. You also need to take into consideration that this option does not allow dark mode targeting, which means that you cannot override the user settings.
How to design emails for dark mode?
Let’s be honest - a good email has to look good both in light and dark mode. That’s why when designing emails for dark mode, you need to keep in mind both options and how the end result will render in recipient inboxes. This can be a daunting task but there are some basic tricks that will help you start.
1. Use transparent images.
Email clients that allow users to switch to dark mode invert email colors in CSS, but they don’t touch the images. That’s why if you are using an image that is supposed to blend in nicely with the background you need to make some adjustments. Otherwise, it’s not gonna look good inverted. It’s best to use images with a transparent background. That way you will ensure that your email will look cohesive and the pictures won’t be awkward.
Alternatively, you can use this to make your email stand out. If you feel like the picture will add a quirky factor and will make your email look more interesting, try using the regular format. However, keep in mind that you need to make sure the design is flawless and it’s gonna work well.
2. Test everything
For every email you create you need to test to perfection. If you are adjusting one thing, you must make sure that it looks good both in light and dark mode. Any line of code that you change has to be tested. Experiment with shades, as stark white and black, doesn’t always look the best. Match color tones together and invert them to see if they still look good. Pay attention to your fonts and always keep in mind that there are 3 different ways your email is displayed. That means that you need to tweak designing emails for the dark mode to perfection.
In short, check if everything flows and do it with every email. With time, you will find what works and what doesn’t but even if you found your design protocol, you still need to double-check how it looks. And always keep in mind that email and its features are constantly changing. This means that at some point, the dark mode could be different too.
3. Add white stroke around dark fonts
Not every logo is designed to look perfect no matter where you put it. Usually, brands create some variations that will look good on dark and light backgrounds but when it comes to optimizing email, this gets a bit more complicated. After all, you really can’t be sure which mode your recipients are using to ensure your logo is visible. The same goes for when you are using text on a transparent picture. I’m sure you can imagine how the black font will look when it has no background and the colors will be inverted?
There are ways to change that. A simple fix - adding a white border. Giving your logo or text a white border is a fool-proof way to make it visible, no matter the color of your background. While the border won’t be visible on the white background it will stand out in the dark.
If you have a light logo you can use the black border or pretty much any color you feel would look good on a white or black background. Keep in mind that it’s best to test it to make sure it’s consistent with the rest of the email and with your brand.
When it comes to displaying your logo in an email, most companies have variations that will look good on light and dark themes, usually with transparent backgrounds. Now, the logos are pictures, which means that they won’t be inverted. You again need to ensure that your brand will be displayed correctly.
Targeting dark mode in email clients
So the good news is that dark mode does not impact HTML emails by default. This means that they are not going to change no matter to which mode the application is set up. That also means that you need to do the work yourself. And that is where you can “hack” the system to start designing emails that work for dark mode.
First, if you need to make sure that dark mode is enabled in your emails, you need to include a line of code in your <head> tag. This is used to check if the device has light mode or dark mode enabled. But a heads up that this line will not always work, but you can check where this option is applicable.
Sadly, based on the site above, most of the major clients do not support this option. However, there is no harm in adding it, just to be on the safe side.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
Then add this media query to your CSS:
@media (prefers-color-scheme: dark) {
body {
background-color: #3D3E40;
color: #FEFEFD;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: #FEFEFD;
color: #3D3E40;
}
}Conclusion about dark mode email marketing
Creating an email that will look good both in light and in dark mode is no easy task. It requires a lot of patience and even more testing. However, with some simple tweaks and our guide, you can create a beautiful email that will look good in any email client. So get to it and start designing emails for dark mode right now!
Instant setup