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)
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.
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?
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. 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.
4. 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.
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.
If you have any questions, please email us at email@example.com.