What is dark mode for?
Less damage to eyesight . Reducing glare causes less strain on our eyes.
Improves comfort in dark environments. Dark mode freight forwarders brokers email lists helps us use screens at night or in low-light spaces.
Battery saving. Dark colors require a lower brightness, which consumes less battery on our devices.
Dark mode has grown rapidly in popularity as users appreciate the convenience it brings and the extra battery life it provides. And with this accelerated growth, the email industry has received it in a haphazard and inconsistent way. So, let's take a look at the current scenario of dark mode in email and how we as email marketers can adapt to it. Before we go into it, a note: we will be talking about emails developed in HTML, as text emails are natively inverted without any major problem.
Which email clients support dark mode?
Mobile applications
Gmail APP (iOS/Android)
Outlook App (iOs/ Android)
Desktop Applications
Apple Mail
Outlook 2019 (Mac/Windows)
Web Clients
Outlook.com
How do different email clients/devices implement dark mode?
This is where the problem begins. There are 3 different ways to apply Dark Mode depending on the email client: Inverting all the colors declared in CSS (Full Inversion), inverting only the light backgrounds and keeping the colors in the areas that are already dark (Partial Inversion) or respecting the original colors (Original Color).
The different email clients apply it in the following way:
Gmail App (Android) Partial Investment
Gmail App (iOS) Total Investment
Outlook (Android) Partial Investment
Outlook (iOS) Partial Investment
iOS Mail Original Color
Apple Mail Color Original
Outlook 2019 (MacOS) Partial Inversion
Outlook 2019 (Windows) Total Investment
Source: Litmus Blog
This diversity in the way different email clients apply dark mode is the first hurdle we encounter when trying to find a stable solution for all of them. The way our email is now displayed in different environments is different and we need to make it as consistent as possible.
Which email clients support overriding their dark mode styles?
Not only do different email clients implement dark mode differently, but support for the CSS styles used to shape that mode is inconsistent.
This is important because without agreement between different email clients on which details can be overwritten, our efforts to make the email look the same everywhere will be in vain. We can only try to make the changes cause minimal damage to the design in the different versions.
Apple's apps allow us to code specific styles for dark mode using a media query :
@media (prefers-color-scheme: dark)
However, this method is not supported by other devices and applications. After the native iPhone application, the most used email client is Gmail, whose App does not allow us to apply changes to the styles of its dark mode. Another client that does not allow us to modify these styles is Outlook 2019, although it is a very unimportant application in B2C lists. Finally, a service that does allow modifications using another method is Outlook.com. Mark Robins explains in this link how to do it using the [data-ogsc] and [data-ogsb] tags .
However, Outlook.com is also not one of the most widely used services, which makes it difficult to justify developing specific styles for this environment.
For most audiences, Apple and Gmail account for about 2/3 of opens.
Summarizing
We could stick with the following ideas:
Apple is the system that least “breaks” our emails in dark mode, keeping by default the styles that we give in HTML and applying the dark mode only to the application interface and not to the content of our email. Although we can create specific styles for the dark mode that affect the content, which would involve generating a specific code for this dark mode and would be added within a media query to the original HTML for the normal mode.
Problems arise, above all, with Gmail App, Outlook.com and Outlook 2019 Windows. There is no way to shape the dark mode of Gmail and Outlook 2019 using CSS. And in the case of Outlook.com, since it requires specific coding for this service and is a minority, it is put at the back of the development priorities.
