What is dark mode
Dark mode is a setting available in many popular email clients that partially or fully inverts the colors in your emails. It's a popular trend that doesn't look like slowing down anytime soon and should be given some thought.
Why use dark mode
Better for your eyes - dark mode can reduce eye strain.
Visibility - in some situations and for certain viewers, dark mode can improve readability.
Prolonged battery life - particularly in devices using OLED screens, dark mode wont drain your battery as much as a regular display.
It's cool! - There's no denying it, dark mode is the cool kid on the block in UX design right now.
What does dark mode do
Dark mode affects email background, border & text colors. The affected colors will be inverted from light to dark and surprisingly from dark to light in some cases.
Image and logo colors are not affected.
The way that dark mode affects your emails will very between email clients and won't always be the same. At the moment Gmail and Outlook have the most invasive color changes when dark mode is used.
There are generally three versions of dark mode applied across email clients today.
- No color change - the surrounding UI of the email client changes to a dark theme but there is no actual change to the email.
- Partial color change - areas with light backgrounds are changed to dark and dark text is changed to light. Areas with existing dark backgrounds are left alone. This creates an entirely dark themed email.
- Full color change - in this version of dark mode areas with existing dark backgrounds are changed to light, light text is changed to dark. This means an email with an original dark design will surprisingly render with lighter colors in a full color change.
How it looks in a full color change:
Which devices support dark mode
- Gmail App (Android and ios)
- Gmail Web
- Outlook (Android and ios)
- Apple Mail
- Windows 10 Mail
How to design for dark mode
Color Contrast - Ensure your background and text colors have sufficient contrast to be easily visible in regular and dark color schemes. WCAG 2.0 standards require a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text (18pt or larger)
Here are a couple of handy free tool to check contrast ratio:
Images & Logos - Always use png format for logos, if you use jpeg you will most likely see a white a white background behind the logo in dark mode:
If your logo is white and you're using a black background or vice versa, you might run into display issues in dark mode. Consider adding a stroke effect to the logo to it's visible when the background color changes:
Dark mode - The top logo has the stroke affect added, the bottom one does not.
If you're planning on using jpeg images with background colors, ensure they're all sized the same to avoid a display like this:
Borders - some email clients render background and border colors differently in dark mode. Meaning if you use the same color for a background and a border it may not render as the same color in dark mode. This isn't necessarily an issue, just something be to aware of.
Take a look at this email, it has a grey background and also a grey border around the bottom section.
When viewed on Office 365 on Mac the border and background color render slightly differently.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email firstname.lastname@example.org