Some email clients have now implemented a Dark Mode theme in their interface. In some cases, the appearance may not be as you intended due to the influence of Dark Mode. Here you will learn how the Dark Mode theme will affect the appearance of your emails.
About Dark Mode
The Dark Mode theme on email clients reverses or inverts colors on images, text, background, and more. Generally, a device theme is divided into two: light (referring to white color) and dark (referring to black color). Currently, almost all email clients have adjusted their settings to be available in dark mode.
So, for instance, when you send an email with a white background or text, if the recipient uses Dark Mode, the appearance of the email you sent may change. However, it will not entirely change the appearance, as it depends on the email client and the device used to open the email.
Email Clients Supporting Dark Mode
Some email clients support Dark Mode, while others do not. Here is a list of email clients that support the Dark Mode theme and the effects when using Dark Mode:
Mobile Apps:
iPhone Mail: No color changes.
iPad Mail: No color changes.
Gmail App (Android): Only some colors change.
Gmail App (iOS): All colors change.
Outlook App (Android): Only some colors change.
Outlook App (iOS): Only some colors change.
Desktop Clients:
Apple Mail (MacOS): No color changes.
Outlook 2019 (MacOS): Only some colors change.
Outlook 2019 (Windows): All colors change.
Web Clients:
Outlook.com: Only some colors change.
Gmail.com: Only some colors change.
Although some of the email clients mentioned above support the Dark Mode theme, they may not display emails in the same way. In other words, some emails may still appear unsynchronized with the original.
Will It Affect When I Send Emails?
The answer is yes. As mentioned above, there will be some color changes depending on the recipient's email client. However, we have some alternatives if you encounter recipients using Dark Mode on their email client:
Ignoring dark mode compatibility, which is under user control. Users who feel uncomfortable reading your email might switch to normal mode to view the content fully/ normally.
Force mode: You can use whole image content as a unified element with the background color if you are worried that dark mode will ruin the email appearance. However, regarding content optimization, using too many or large images can affect email performance, such as load time if the image is large or unresponsive text content due to being embedded in the image.
Points to Note
Given that dark mode can change colors automatically, and we cannot control it
There are many types of email content we can create. While this dark mode issue cannot be fully addressed, we can still anticipate it so that the emails we send can still achieve optimal results in dark mode.
Note, some tips here are written based on issues found in Gmail (iOS). Other email clients may not experience this, but here are some points to consider regarding dark mode emails.
Text and background color
If the text color is light and the background color is dark, the colors in the email client will automatically switch to the opposite colors. For instance, in dark mode, light text color will turn dark, and dark background color will turn light.
Especially if you use the Text component. If you use colors other than light and dark, the background in the Text component will turn slightly dark. For example, if you choose the color orange, it will change when exposed to dark mode, as shown below
In the example above, using orange as the background color. However, due to the dark mode effect, the color will turn dark but still retain its original base color.
Image format
There are at least two image formats to consider, namely .jpg/.jpeg and .png.
.jpg/.jpeg
Images in this format will not be affected by dark mode. This also applies if the image is not 100% full (e.g., there are curves or empty areas). So, if you use an image in .jpg/.jpeg format, the colors will not change in dark mode.
.png
Images in this format will be affected by the dark mode effect ONLY in areas that do not have a background or are transparent. If your .png image has transparent areas, those areas will be affected by dark mode. For example: