Dark Mode for Email: Emerging Trend or Fleeting Fad?

By L-Soft Staff

A setting called dark mode has been a rising trend in operating systems and user interfaces for several years. It allows users to invert the colors of an application to display content using light text on a dark background instead of the traditional dark text on a light background. Now several email clients have started adopting dark mode as an option as well. Let's take a look at how dark mode affects HTML email and how to optimize your newsletters and announcements so that they are compatible with this new mode.

The Main Benefits of Dark Mode

Dark mode has become popular among programmers, developers and other IT professionals whose jobs require them to spend much of their days in front of a screen. The main benefit includes decreased eye strain and less exposure to blue light, which can affect your circadian rhythm and disrupt your sleep. The darker the room, the more jarring a bright, white screen will appear. For others, it's simply an aesthetic decision.

Email Clients that Support Dark Mode

Many common email clients, including Outlook, Gmail, Apple Mail and Yahoo Mail, all support dark mode in one form or another. Some, for instance Yahoo Mail, offer a dark mode theme but won't forcibly invert your existing colors if you have a light template. However, there are others, for example Outlook and Gmail, that will unless you're already using dark colors. These email clients are essentially enforcing their own dark mode styling by overriding your colors, which can cause problems if you're not anticipating this.

There is an emerging CSS media query, @media (prefers-color-scheme: dark) and @media (prefers-color-scheme: light), which you can use to detect the preferred mode of each user, allowing you to provide separate styles for each group. However, this media query isn't universally supported by all email clients yet, so don't put all your eggs into this one basket. Instead, there are several other small adjustments that you can make to ensure that your HTML emails render acceptably in both dark and light mode.

Optimizing Your Templates for Dark Mode

• If you're creating supplemental styles for dark mode, don't use a completely black background with completely white text. Since the primary goal of dark mode is to reduce eye strain, the extreme contrast between black and white would negate the whole purpose. Instead, use light gray text on a dark gray background to provide enough contrast for readability without making it jarring.
• Use the PNG file format with transparent backgrounds for your images so that you don't end up with colored boxes around your images and logos. This is especially important for email clients that enforce their own dark mode styles and provide background colors that may differ slightly from what you're anticipating.
• If your message and brand style require the use of dark logos, icons or other such graphical elements, make sure to add a white or light outline around the graphics. This outline will be invisible on a light background but is necessary so that your logos and graphics don't disappear on a dark background due to lack of contrast.
• Allow your subscribers to choose their preferred mode when they subscribe and store this information as a profile field in your subscriber database. You can then use this data and add simple conditional blocks to include different CSS styles for each group. You'll be in complete control of how each version will look and every subscriber will get the version that they prefer.
• If you have experience designing HTML newsletters, you know the paramount importance of testing. Test your designs in both light and dark mode and test them in the most common email clients that your subscribers use. This is the only way to find out if the results are acceptable to you.

Trend or Fad?

Considering the increasing adoption rates of dark mode, it does appear that it's here to stay, even for email. If you're an email designer, it will become increasingly important to take steps to optimize your HTML templates so that they work effectively for all audiences and preferences.

Next Steps