What is Dark Mode?
If you use Gmail, Outlook or Apple’s Mail systems, you would have noticed the feature Dark Mode. When enabled, Dark Mode changes the appearance from a light to dark and text from dark to light. There are three main benefits of Dark Mode:
- It is easier on the eyes preventing eye strain
- It reduces screen brightness and preserves battery life
- It can make it easier to read the content of an email.
Who Supports Dark Mode?
- Apple Mail App (iOS 13)
- Gmail App (Android 10 Q)
- Gmail App (iOS 13)
- Outlook App (Android 10 Q)
- Outlook App (iOS 13)
- Apple Mail (Mac OS Mojave)
- Outlook Office 365 Dark (Mac OS 10.15)
- Outlook Office 365 Dark (Win 10)
- Outlook.com / Office 365 (All major browsers) – Supported in both Windows & Mac
What does Dark Mode mean for my email campaign?
Dark Mode will have an impact on the look and design of your campaigns. This means a few things need to be considered to ensure your campaign doesn’t lose appeal and attraction because your recipient is using Dark Mode.
Have images and logos optimised for both modes
For images, it’s best to use PNGs over JPGs and where possible, transparent backgrounds. These work best in Dark Mode allowing images to render correctly and lighten any text that maybe in the image
For Logos where you have a dark background or darker colours, it is best to add an outer glow or dark stroke to stop the logo blending into the dark background of Dark Mode.
Look at your font colour to ensure it will be legible in both modes
With Dark Mode, what’s dark will go light and what’s light will tend to stay light. Consider using white or light font colours, so when viewed in Dark Mode, the font will be easier to read.
Test your campaigns in both modes before sending
Testing is always an important step before launch. Add into your testing process Dark Mode for both desktop and mobile to see how your campaign will render and adapt into Dark Mode.
What else can I do to improve readability in Dark Mode?
You can also add lines of code to the HTML to ensure Dark Mode readability is enabled in your campaign
<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>
color-scheme: light dark;
supported-color-schemes: light dark;
Or the following media query
@media (prefers-color-scheme: dark)
When creating your next campaign, take into consideration your readers that use Dark Mode. If you need help with creating a Dark Mode friendly campaign, contact the TractionNext team.