Dark mode - is a reversed color scheme that imparts a soothing experience to the eyes. It lets you view light-colored text, UI elements, and icons on dark backgrounds.

Sample of testing dark VS light mode:

According to a 2020 study by Android Authority, 81.9% of participants use dark mode on their phones.

The dark mode is a rising trend for its dark aesthetics, but it has many benefits apart from just looking good. The most well-known pros are better reading experience, battery saving, and improved email accessibility.

Mobile Apps:

Desktop Clients:

Web Clients:

More detailed article about the dark mode can be found in our blog post.

So 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 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).

An email client with the dark mode set detects the email content background color. Then apply the dark background if it's not been set and apply contrast shades of email content colors.
​

However, the dark mode turns it to white in Gmail on iOS and Android when it comes to a black background. Dark grey gets shifted to light grey, etc.

The high contrast between true black backgrounds (#000000) and true white (#FFFFFF) will make things more difficult to read, defeating the purpose of dark mode altogether. Instead, use dark gray (#121212) as the background color to soften the contrast.

When it comes to the fonts you choose, one hack to try is adding a white stroke around your darker fonts. While the white stroke won’t show up much, if at all, in lighter settings, in dark mode, it’ll help define your text, making it easier to read.

1. Use transparent background for images. Images with background colors might be difficult to see in dark mode. Use transparent backgrounds with all of your images to ensure they are displayed properly.

2. When in Doubt, Use Text. To ensure your message comes through in dark mode, opt for using text rather than images of text. This will render better in dark mode and improve your deliverability and accessibility.

3. 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 that ensures that the 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.

4. 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.

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, optimizing your email designs for the dark mode is not rocket science — you only need to work on email appearance. No need to work with codes yet.

Here are a few easy tips to remember before sending in dark mode:

Most importantly, always test such templates before sending them.

The world of email is constantly changing, and dark mode is, too, so make sure you test your emails on the most popular email clients in your lists. You can do this manually in Stripo or using email testing tools like Extra Email Clients Tests

Thank you for taking the time to read our articles. We hope you will find this information helpful.

​If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.