First of all, I want to say that you can find more information about the dark mode in our blog post.
The dark mode displays light-colored texts, icons, and UI elements on dark backgrounds.
How does it work? Some believe that dark mode shifts colors to contrast ones (opposite ones from the color wheel) when an email is opened on a device with the dark mode.
But this is not quite true. It does not invert green to red, nor blue to gold or yellow. The dark mode utilizes lighter shades of the exact same colors (in case you did not set a specific color as a content background).
How does it do it? An email client with the dark mode set detects the email content background color. Then applies the dark background if it's not been set and applies contrast shades of email content colors.
However, when it comes to a black background — the dark mode turns it to white in Gmail on iOS and Android. Dark grey gets shifted to light grey, etc.
WHAT EMAIL CLIENTS SUPPORT DARK MODE?
Email clients and apps listed below currently offer Dark Mode—either as an option that the user can set manually or by automatically detecting the user’s preferred color scheme:
- Gmail App (Android)
- Gmail App (iOS)
- The iPhone Native Mail App (Native Mail on iOS)
- Outlook App (Android)
- Outlook App (iOS)
- Apple Mail on macOS
- Gmail on macOS and Windows
- Outlook (Mac OS)
- Outlook (Windows)
Tricks to optimize emails for dark mode:
To optimize your email template for the dark mode, you should:
1. Work on the imagery
When using images, in most cases, it’s best to use transparent backgrounds.
a) Use icons and images with transparent backgrounds or make sure their backgrounds are of the same size to avoid this:
Would you agree that this is not the best example of a dark theme email as images with backgrounds of different sizes ruin the entire impression?
b) Be careful with transparent images
You are supposed to use images with transparent backgrounds for product cards.
However, photos of people would look way better if they have a specific background.
2. Work on logos
a) May your logos have no backgrounds
b) May your logos be written in any color but not black to render well across both dark and light themes.
Some coders suggest that you use two logos and even provide a code sample which ensures that black logo is displayed in the light mode, and white — in the dark mode.
We tested — the code did not help. But made our email code much heavier.
c) Apply light shadows to black logos
If your logo has to be written in black, add a light shadow/stroke around it. It will look nice, and it will comply with your brand design.
3. Set background colors for email containers
If you do not want your email content to have a dark background, you may set a custom one with Stripo.
The color that you've set as the “Background color of content” will remain exactly the same in the dark mode.
Set “transparent” color to the stripe then — in this case, the chosen background color will be applied to email content, but not to the entire email area.
Be sure to set the same color scheme to all stripes/rows.
4. Always test before you send.
Finally, testing your emails in both light and dark modes is absolutely essential. Since you cannot make your emails perfect for each mode, you can use tricks for creating emails that work well both in dark and light modes.
By testing your emails, you'll find out what tricks work for you enabling you to make your emails look in their best in either mode.
5. Do not add any extra code elements
Despite some recommendations to add special code elements that are said to enable your emails to render in a dark mode, these code samples do not solve any issues. At least, this is what numerous tests show.
Besides, email templates work pretty well in most email clients.
Hence, it is not rocket science to optimize your email designs for the dark mode — you only need to work on email appearance. No need to work with codes yet.