What is Dark mode?
Dark mode is a display setting for user interfaces such as phones and laptops. Instead of the default dark text showing up against a light screen (known as ‘light mode’), a light colour text (white or grey) is presented against a dark or black screen. It is also known as black mode, dark theme, and night mode.
Most operating systems and apps are designed to allow for dark mode. Find out how to view your apps and browsers in dark mode.
Here is an example of an email viewed in the default light mode. Looks great.
Now see what happens when the same email is viewed in dark mode:
The dark logo disappears or blends too much into the dark background. The light background edges of images with rounded corners will show unintentionally.
Why dark mode?
Many people prefer the dark mode setting as it is easier on the eyes meaning it reduces eye strain especially at night or in low-light conditions.
What is the impact on design and coding for emails?
When designing and coding your emails you must consider that probably half of your audience will view your email in dark mode. The more people are made aware of this choice the more people tend to choose the dark mode.
How do I create emails for dark mode?
Colonel John “Hannibal” Smith the leader of The A-Team famously said: “There are two ways we can do this: the easy way and the hard way.”
The smart (easy) way
- Optimise your logos and images for dark mode.
- Check that the colour scheme for your backgrounds and text aren’t altered too much in dark mode and still reflect your corporate identity.
The hard way
- Add code to ensure that dark mode is enabled in your email for all the recipients that have dark mode switched on.
- Add media queries to your style section in the head to target specific dark mode styles
- Swop between light mode logo and dark mode logo depending on which one is enabled
- Apply a CSS filter to change the brightness and contrast of your images
These fixes don’t work across all email clients in the same way and therefore your dark mode emails render differently across apps and email providers.
Tweak your emails for dark mode
Sure seems like a lot of time and effort to do things the hard way…
Therefore, we prefer the smart way!
1. Optimise your images for dark mode
Create a version of your logo that works in light and dark mode:
If your logo disappears on a dark background, then add a light background behind your logo that blends in on light mode but shows on dark mode:
Use transparent PNG image format:
Use white or light-colored background for images and icons that contain dark elements.
Add a white or lighter coloured outline around dark text in image to helps the elements stand out.
2. Check that the colour scheme for your backgrounds and text work in dark mode and still reflect your corporate identity
Looks pretty solid to me! The highlight colour stays the same and the main text colour looks the same on light mode and dark mode.
Some might prefer the smart way, and some might prefer the hard way. In the end it is up to you to decide what will work for your brand.
It comes down to making decisions around what is acceptable and what isn’t.
Then test, test and test again across as many devices and email clients that have dark mode enabled.
Learn more about dark mode for email
Campaign Monitor: https://www.campaignmonitor.com/resources/guides/dark-mode-in-email/