Dark mode is a user-selected display option that’s available on Android, iOS, and Outlook. If dark mode is enabled, it checks any font, background and button colours, and if a colour is defined, it targets the color-related HTML attributes and CSS properties. Dark mode then adjusts the styles to be lighter or darker. For example, if your text is a dark colour, dark mode changes it to a lighter one.
If a contact has dark mode enabled, it changes the colours in your email campaign by default. Below, you can find ways to make your campaign dark mode friendly.
Comparing dark and light mode
Important
Dark mode doesn’t have universal standards, meaning that different devices and apps show designs differently when they're in dark mode.
Viewing in Outlook 2016's desktop app
Here’s two campaigns in Outlook 2016 desktop app (light mode standard):
Here’s the same two campaigns in the Outlook 365 desktop app (dark mode):
Note the differences in each campaign, such as:
The lighter and white colours changed to a darker shade.
The darker text colours changed to a lighter shade.
Viewing in Android's Gmail app
Check out this example. This time it's in an Android Gmail app in dark mode:
Noticeable changes for Android:
Any darker grey backgrounds changed to black.
Adapting your campaign
To make sure your campaign appears as you expect in both dark and light modes, here’s a list of proactive steps you can take:
Use darker background colours
Campaigns created with dark mode in mind are less likely to be impacted by dark mode rendering. Look at the white on black section in the screenshots above, which remains unchanged.
Use image transparency
A transparent image allows the background colour change to be seamless with design still intact.
Use a white stroke on your black font for images or icons
The colour black disappears on a black background, you can put a white stroke on your dark text or icons to improve readability when the background colours change.
Avoid mixing images with background colours
You can set the background colour of an image, so it matches the background of the block it sits in. This makes for a seamless aesthetic, but when dark mode changes the background colour of the block, it won’t be seamless anymore.
Test your design in both light and dark appearances
See how your campaign looks in both appearances and adjust your designs as needed.