The Dark Mode feature was introduced in iOS 13 and Android 10. This functionality can completely change the way your emails look, so, in this article, we have collected useful pieces of information that help you overcome this problem.
Possible issues with Dark Mode
When a user opens an email in an email app on a device that is set to Dark Mode, then the following 3 scenarios are possible:
- Nothing will change at all and the colors will be unchanged.
- The colors will change (although the system setting – i.e. either Dark or Light Mode – is applied automatically, the user can manually change it within the app).
- The color scheme will change, including background, text and border colors.
Embedding Dark Mode CSS style in an email template
When embedding Dark Mode CSS style into your email template, ensure that your browser is set to Light Mode to see the correct colors while you are editing your email campaigns. The CSS style can affect the email while the browser is in Dark Mode. The color-scheme Media Query is hardly supported.
It is recommended to work in Light Mode while creating email campaigns.
No individual Dark Mode block style settings
There are no individual Dark Mode block style settings that can be applied for each email content block. This means that one single style for the content's background, font color, text links, CTA background color, etc. will be used for all blocks in an email campaign.
Checking the color scheme used on a device
You can check the currently used mode with the @media (prefers-color-scheme:dark) Media Query to prevent the color scheme of your email from being changed unexpectedly. However, this Media Query works only in a few of the tested email apps.
Test results
In the following sections, you can see the latest test results from March 2020.
The test results related to webmail services are not listed in this article because only Outlook.com and Outlook 365 have a Dark Mode setting that works as follows:
- If Dark Mode is activated in the browser settings only, then the colors will not change.
- If Dark Mode is activated in the webmail settings, then the colors will change.
Desktop email client test results
The following table contains the desktop email client test results related to emails in Dark Mode.
| Apps | Will emails look the same when Dark Mode is activated (default setting)? | Can users change the color scheme (i.e. Dark or Light Mode) within the app? |
Does it support the @media (prefers-color-scheme:dark) Media Query? |
|---|---|---|---|
| Outlook 365 (Windows) | No | Yes | No |
| Outlook 365 (macOS)1 | Yes | Yes | Yes |
| Windows 10 Mail (Windows) | No | Yes | No |
| Apple mail 13 (macOS) | Yes | No | No |
| Mozilla Thunderbird (Windows)2 | Yes | Yes | Yes |
| Mozilla Thunderbird (macOS)2 | Yes | Yes | Yes |
| Spark (macOS)2 | Yes | Yes | Yes |
| Airmail (macOS)2 | Yes | Yes | Yes |
1 By default, the application does not alter the colors. Dark Mode can be enabled for HTML content within the application. After activating it, the colors will change.
2 By default, the application does not alter the colors. Dark Mode can be enabled within the application (and it will not affect how the original colors will be displayed).
Mobile app test results
The following table contains the iOS email app test results related to emails in Dark Mode.
We have performed the tests on an Apple iPhone 7 (iOS 13.3.1).
| iOS app | Will emails look the same when Dark Mode is activated (default setting)? |
Can users change the color scheme (i.e. Dark or Light Mode) within the app? |
Does it support the @media (prefers-color-scheme:dark) Media Query? |
|---|---|---|---|
| iOS Mail1 | Yes | No | Yes |
| Gmail | Yes | No | No |
| Gmail IMAP | Yes | No | No |
| Outlook | No | Yes | No |
| Yahoo | Yes | No | No |
| AOL | Yes | No | No |
| GMX | Yes | No | No |
| WEB.DE | Yes | No | No |
| Freenet.de | Yes | No | No |
| Mail.ru | No | Yes | No |
| Yandex.ru | No | Yes | No |
| QQ Mail | No | No | No |
| Blue Mail | Yes | No | Yes |
| myMail | No | Yes | No |
| Spark | Yes | No | Yes |
| Edison Mail | No | Yes | Yes |
| Boxer | No | Yes | Yes |
1 The colors of the email's content will change if the Smart Invert or Classic Invert Accessibility Setting is enabled.
The following table contains the Android email app test results related to emails in Dark Mode.
We have performed the tests on a Google Pixel 3a (Android 10).
| Android app | Will emails look the same when Dark Mode is activated (default setting)? |
Can users change the color scheme (i.e. Dark or Light Mode) within the app? |
Does it support the @media (prefers-color-scheme:dark) Media Query? |
|---|---|---|---|
| Gmail | No | Yes | No |
| Gmail IMAP | No | Yes | No |
| Outlook | No | Yes | No |
| Yahoo | Yes | No | No |
| AOL | Yes | No | No |
| GMX | Yes | No | No |
| WEB.DE | Yes | No | No |
| Freenet.de | Yes | No | No |
| Mail.ru | No | Yes | No |
| Yandex.ru | No | Yes | No |
| QQ Mail | Yes | No | No |
| Blue Mail | Yes | No | No |
| myMail | Yes | No | No |
| Spark | No | Yes | Yes |
| Edison Mail | Yes | No | No |
| Boxer | No | Yes | No |
| Aqua Mail | No | Yes | No |
| K-9 Mail | No | Yes | No |