Dark Mode Newsletters: 5 Tips to Make Sure Your Email Design Works Well in Dark Mode
Dark mode is becoming more and more popular as the default setting on smartphones and computers. Learn how to make your email design work better in dark mode.
Dark mode is becoming increasingly popular on smartphones, desktops, and tablets. Many people change the display of their devices to dark mode for different reasons, such as protecting their eyes, saving energy, or making it look better. A Litmus study shows that an average of 35% of opens recorded in 2022 were already using dark mode. The proportion is likely to be significantly higher today.
This can be challenging for email marketers: Newsletters that look perfect in light mode may suddenly appear illegible or unappealing in dark mode. Using dark backgrounds, invisible logos, or text that is hard to see can make your campaign less effective.
In this article, we’ll show you how to optimize your newsletter for dark mode, what pitfalls to watch out for, and simple tricks your design can use to impress in both modes.
Contents:
- What is Dark Mode?
- What Does Dark Mode Mean for Email Marketing?
- How Email Clients Deal with Dark Mode
- Tip 1: High Contrasts and Midtones
- Tip 2: PNGs Instead of JPGs for Images with Transparencies
- Tip 3: Light Contours for Dark Graphics and Logos
- Tip 4: Don’t Embed Text as an Image
- Tip 5: Test, Test, Test!
The Most Important Stuff in a Nutshell
- Dark mode inverts bright colors, which can alter the design of your newsletter.
- Different email clients implement dark mode differently.
- Images, logos, and texts should be designed to work in both modes.
- Transparent PNGs and high contrasts are a must.
- The key to success is regular testing in different clients.
What is Dark Mode?
Dark mode is a display setting on smartphones, computers, or tablets that uses dark colors for the user interface. Instead of having black text on a white background, texts usually appear light on a dark background.
The advantage: There is less glare. There is lower energy consumption. There is more comfortable use in low light. Dark mode is now a standard option in many operating systems, including iOS, Android, Windows, and macOS, as well as various programs.
What Does Dark Mode Mean for Email Marketing?
Like many other programs and apps, most email clients offer a dark mode. Depending on the system, this feature can apply to both the inbox interface and incoming emails.
In the context of email marketing, dark mode introduces an additional design dimension to your newsletter. It is essential that colors, logos, and backgrounds are compatible with both light and dark modes.
Example of the display of a newsletter in light mode and dark mode.
[Newsletter created with CleverReach 🧡]
Ignoring dark mode when designing emails is a mistake:
- illegible text on a dark background,
- disappearing logos,
- unwanted color changes or
- an unprofessional appearance.
So, if you’re looking to get your newsletter out to everyone in a way that’s both appealing and professional, you should definitely think about adding a dark mode to your newsletter design.
How Email Clients Deal with Dark Mode
Not every email client handles dark mode in the same way. There are basically three different ways in which email clients implement dark mode:
- No color changes: Some email apps let you switch to dark mode, but the way individual emails look stays the same.
- Partial colour inversion: Email clients know how to handle light backgrounds. They invert them so that light backgrounds become dark and dark texts become light. If the background is dark, it usually stays the same, so the design ends up completely dark.
- Complete color inversion: This method flips all the colors, so light backgrounds become dark, and dark ones light.
Since there’s no standard for dealing with dark mode and every program handles it differently, optimizing the newsletter can be tricky. You’ll only find the best option by testing and experimenting.
5 Tips for Your Email Design in Dark Mode
We’ve put together five simple tips to help you make your newsletter look just as professional and appealing in dark mode as it does in light mode. You can use these with any newsletter—and you won’t need to know any programming!
1. High Contrasts and Midtones
Make sure your content stands out in both light and dark mode and that there’s plenty of contrast.
Midtones usually stay the same in dark mode because they have enough contrast in light and dark mode. Mid tones make it easier to read and look more consistent with your company’s style.
2. PNGs Instead of JPGs for Images with Transparencies
If your images have transparent backgrounds, it’s better to use PNG formats. JPGs with a white background can quickly look like foreign objects in dark mode.
A transparent PNG blends in nicely, no matter what the background is like.
3. Light Contours for Dark Graphics and Logos
Logos or icons with dark elements might “disappear” in dark mode. This is especially bad for logos.
So, add light contours, backgrounds, or drop shadows to keep dark graphics visible even in dark mode. If you use the same color for this as for the background in light mode, the contours will only be visible in dark mode.
4. Don’t Integrate Text as an Image
You should always include text as HTML text, i.e., as a text element in the newsletter editor, rather than as an image. Only then can the text color and background adapt to dark mode.
This also has other advantages:
- Screen readers cannot read image texts, but regular texts can(accessibility!).
- To avoid the spam folder, a balanced text/image ratio is important.
5. Test, Test, Test!
The key to effectively appealing to users in dark mode is to test extensively.
In our drag-and-drop editor, you can test your newsletter in preview mode for dark mode. This will give you a feel for how your email might look in dark mode and which elements you might need to adjust.
Good to know: As email clients interpret dark mode individually, the dark mode preview in CleverReach offers a helpful orientation and realistic approximation of possible representations. The function is available from the Pro plan onwards.
If your email looks good in the preview in both normal light mode and dark mode, you can send a test email in the second step. If possible, open this in different email clients in both modes.
Pay attention when testing:
- Readability of texts,
- Display of logos and icons,
- The color effect of your buttons,
- and the overall impression in dark mode.
Conclusion: Your Email Will Look Good in Dark Mode if You Make a Few Simple Changes
Dark mode has long been the standard and plays an important role in email marketing. If you don’t design your newsletters with dark mode in mind, your messages may fall flat or look unprofessional.
You can ensure that your newsletter is equally convincing in light and dark by using transparent PNGs, high-contrast colors, adapted images, and regular tests.
