Several email clients have now implemented a Dark Mode theme on their displays. In some cases, it may not look the same as you intended because it is affected by the Dark Mode theme. Here you will learn how the Dark Mode theme will affect the appearance of your email.

About Dark Mode

The Dark Mode theme on the email client displays inverted or reversed colors in images, text, backgrounds and more. Generally, the theme of a device is divided into 2, namely light (Refers to white) and dark (Refers to black). Currently, almost all email clients have adjusted their settings for dark mode.

So, for example, when you send an email with a white background or text, if the recipient of the email uses Dark Mode, the color display of the email you send will change. However, it will not completely change the appearance, because this event only occurs on the email client and what device you use to open the email.

Email Client that Supports Dark Mode

Some email clients already support Dark Mode, but there are also email clients that don’t support Dark Mode. Here is a list of email clients that support the Dark Mode theme and the effects that occur if use the Dark Mode theme to open the email:

Mobile Apps:

• iPhone Mail: No color change.
• iPad Mail: No color change.
• Gmail App (Android): Only some colors have changed.
• 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 change.
• Outlook 2019 (MacOS): Only some colors have changed.
• Outlook 2019 (Windows): All colors change.

Web Clientss:

• Outlook.com: Only some colors change.
• Gmail.com: Only some colors have changed.

Even though some of the email clients mentioned above already support the Dark Mode theme, that doesn’t mean they handle your emails the same ways. So, it could be that in some emails there is still a display that is not synch with the original one.

Will It Affect When I Send Email?

The answer is yes. As mentioned above, there will be some color changes depending on the email client of the recipient. However, we do have a few alternatives if you are dealing with email recipients using a Dark Mode theme in their email clients:

1. Ignore the compatibility of dark mode where the control rests with the user. Users who feel uncomfortable reading your email may switch to normal mode to view content in full/normal.

2. Force mode, you can use the full image content as a unified image element along with the background color if it is feared that dark mode will spoil the appearance of the email. But in terms of content optimization, using too many or large images can also affect email performance, such as load time if the image is large, or text content that is not responsive because it is attached to an image.

Points to Note

Dark mode is able to change the color automatically, and we can’t control it. There are so many types of email content that we can create. While this dark mode issue can’t really be handled completely, but we can still anticipate it so that the emails we send can still get maximum results in dark mode.

Note: Some of the tips here are written based on the existing issue in Gmail (iOS). Some other email clients may not experience this, but more or less the following are some points to note regarding dark mode email.

1. Text and background color

If the text is light and the background color is dark, then the color in the email client will automatically change to the opposite color. For example, in dark mode, the light text color will be dark, and the dark background color will be light.

Especially if you use the Text component. If you use a color outside of light and dark, the background on the Text component will tend to turn dark. For example, if you choose orange, then when you are exposed to the dark mode effect, the color will change to orange like the following example

In the example above, using orange as the background color. However, due to the effect of dark mode, the color will be dark but still with the original base color.

1. Image formats

There are at least 2 image formats that need to be considered, namely .jpg/.jpeg and .png.

• .jpg/.jpeg Images with this format will not be affected by dark mode. Also applies if the image is not 100% full (eg there is an indentation or an empty area). So if you use an image with a .jpg/.jpeg format, the color will not change in dark mode.

• .png Images with 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 a transparent area, then that area will be affected by the dark mode effect. Like the following example: