Light mode is the default display on your mobile phone or desktop where you have dark text showing up against a light background. Dark mode is a reversed colour scheme where you have light text, imagery and UI elements against a dark background.
Dark mode is becoming more and more popular with users. When creating your email campaigns, it’s important to ensure that your emails look good in both dark and light mode, otherwise your emails may not render correctly, and and important message may be missed.
Which email clients support dark mode?
Mobile clients
- iPhone Mail
- iPad Mail
- Outlook App (iOS)
- Gmail App (iOS)
- Outlook App (Android)
- Gmail App (Android)
Desktop clients
- Apple Mail
- Outlook Office 365 (MacOS)
- Outlook Office 365 (Windows)
Web-based clients
- Outlook.com
How do I optimise my email for dark mode?
1. Use images with transparent backgrounds
Most email clients that support dark mode will automatically change the colours of everything in CSS (e.g., background colours and text) aside from the colours within your images. An example of the same email in both dark and light mode is shown below.
Although the email shown in dark mode still works, it doesn’t look quite right. It is also important to respect the preferences of the users that are viewing your email and if they’ve opted to use dark mode, they may prefer to see images against a dark background.
If you’re including images in your email, then it’s best to include images that have a transparent background so that the image changes depending on the background of the email. There are many tools you can use to do this; we use Adobe Illustrator.
It is also important to be mindful of the colours in your images as dark colours might not show up as well against a dark background.
An example of the same email including images with transparent backgrounds is shown below.
2. Optimise logos
If your brand’s logo includes dark colours, it might not show up too well against a dark background. To avoid losing your logo to a dark background, you can add a white stroke around it to help it stand out against the dark background. Again, there are many tools you can use to do this; we use Adobe Illustrator.
3. Use images instead of buttons if you want to stop the colours changing
Most clients that support dark mode will automatically change the colours of everything in CSS aside from the colours within images, and this also applies to buttons. If the colours of buttons within your email have been set to brand colours, you’ll want to avoid these colours changing. Instead of using buttons, create an image with a transparent background replicating the button.
Below is an example of how buttons appear in light mode and dark mode in the same email.
Below is an example of the same email in dark and light mode where buttons have been replaced by images.
4. Test your email
Testing your email to see how it looks in both dark and light mode is absolutely necessary. We use a tool called Litmus to test and preview emails to ensure they are rendering correctly across all clients, in both dark and light modes.