How To Design Emails For Dark Mode

As more employees use dark mode as their default display setting, you’ll need to optimize your email design approach to ensure your internal emails look their best. Learn the best dark mode email design tips to make your emails display perfectly however your employees view them.

Dark mode is here to stay. According to various surveys, a majority of users prefer dark mode over default display settings. Over 91% of Android users use dark mode whenever possible, with over 36% of iOS users doing so as well.

In this blog post, we’ll cover dark mode email design best practices so you know what possible issues to consider. And we’ll go in-depth on how to design your emails for dark mode so your employees receive the best possible internal content from your business.

What is Dark Mode?

Dark mode is a display setting for interface-based devices and software that features a dark background rather than a white background.

Use dark mode to reduce the amount of light emitted from a screen while maintaining a level of contrast to make the displayed content readable.

The following email clients support dark mode:

• Apple Mail
• iPhone and iPad Mail
• Gmail for iOS and Android
• Outlook for iOS and Android
• Outlook 2019 for Mac OS
• Outlook 2019 for Windows

Why do your employees use dark mode?

Dark mode uses less energy than traditional display settings because less brightness is required for displaying content. Not only does it help prolong device battery life, but it is also easier on the eyes for employees that need to view screens for the majority of their jobs.

When setting up their devices and software accounts, your employees select whether or not to use dark mode as their default display settings. With more developers embracing this trend, it’s likely an increasing number of your employees will use dark mode on their mobile and desktop devices.

How to Design Dark Mode Emails

In the email clients we listed, dark mode will cause emails to display with dark mode characteristics—dark background, white text, etc. Some email content, like plain text, will be automatically converted to display in dark mode, while other content, like images, will be left alone.

If you know the email content you’re sending will be converted via your recipients’ dark mode settings, you should design your emails accordingly. Follow these dark mode email design best practices to ensure your emails look great regardless of how your recipients view them.

How to determine if your employees use dark mode

Is it worth your time to create dark mode versions of your internal communications? A simple pulse survey can give you a good idea of who in your organization would require internal communications designed for dark mode.

If the number of your employees using dark mode doesn’t warrant the extra effort, be sure to include employee feedback options within your internal communications so those using dark mode can indicate if their experience is drastically affected. With ContactMonkey, you can collect anonymous employee feedback directly from your internal communications:

Once you determine what percentage of your employees use dark mode, weigh the pros and cons of spending time creating two sets of internal communications.

What text and fonts work best with dark mode?

Dark mode settings on various devices will ensure there is an adequate amount of contrast between font colour and background colour, but not in every case. This can lead to content that is hard to read.

Text on top of images can also be converted, but because images aren’t converted in dark mode, this can also lead to difficult to read content.

To avoid issues with text and fonts in dark mode, consider the following tips:

• Ensure your text isn’t placed on top of images if possible.
• Use a heavier font weight to increase contrast when in dark mode.
• If possible, combine the text with images to avoid having one be swapped in dark mode while the other remains the same.
• If you do have text over images, consider creating an alternate version of that image designed specifically for dark mode. E.g. a darker image that blends in with the dark mode background, which will contrast with the white text.

Ultimately, you’ll only know how your emails will be affected by your employees’ dark mode settings by performing test sends of your emails. Using ContactMonkey’s internal communications tool, you can send test emails to yourself prior to them going out to your organization.

If your company uses a particular email client for internal communications, preview your test email within that client using its dark mode settings. This will give you a good idea of how your employees’ emails will display in dark mode.

What images work best with dark mode?

Since the background of your emails can be affected by dark mode settings, it’s important to make sure your images retain their contrast. While a black logo might look great on a white background, it will be nearly invisible on a black background.

There are a few solutions for this issue. You can create dark mode versions of images you use frequently, like company logos. If your normal company logo is black on a white background, create an inverted version where it is white on a black background so it blends in with a dark mode background.

Another issue that can occur are images whose backgrounds are part of the image. If part of your image is a white background, it’ll likely be unaffected by the dark mode changes. This can result in blocky images that impact the overall design of your emails:

You can consider using PNG images within your emails rather than JPEGs. PNG images are able to have blank space where the background will be whatever is behind the image. But for darker images, using a PNG risks the dark image blending in with the dark background.

If you need to display dark images in an email, you may use an alternate version of the image designed specifically for dark mode. But if an alternate version isn’t possible—like if the image is a photo rather than a logo—you may have to consider using a white background and coordinate how that will look in relation to your overall email design.

Ultimately, you’ll need to consider what type of images you’re sending in your emails and select a course of action accordingly.

Use ContactMonkey for Dark Mode Email Design

If you’re experiencing issues with dark mode affecting your employee emails, using an internal communications tool like ContactMonkey can make a world of difference. Not only does ContactMonkey save you huge amounts of time when creating your internal communications, but it also helps you avoid some of the common problems of dark mode affecting how your employees view your emails.

Using ContactMonkey’s email template builder, you can create stunning HTML internal emails and newsletters that aren’t affected by the majority of dark mode settings:

Your background and font colours will not be affected by your recipients’ display settings, which means you don’t have to worry about maintaining adequate contrast for ease of viewing.

As mentioned earlier, you can use embedded surveys and employee comments to ensure your employees can view your emails without error. With ContactMonkey, you can embed employee surveys and anonymous comment features within your internal communications:

In addition to asking how your employees view your emails, you can also take a data-based approach to assessing the impact of dark mode display settings. Within ContactMonkey’s email analytics dashboard you can view metrics like open rate, click-through rate, and read time; all metrics that will be impacted if your employees’ viewing experience is impacted by their dark mode settings:

Collect email metrics to contextualize the feedback you receive from your employees. If you learn that many of your employees are using dark mode, experiment by sending out an alternate, dark-mode designed internal email to see how it affects these metrics.

If you learn that a certain segment of your workforce prefers dark mode emails while the remainder prefer regular emails, you can create email lists to cater to your employees preferences. With ContactMonkey’s List Management feature, you can create custom email lists to target employees with content specifically relevant to them—all without requiring help from IT.

ContactMonkey integrates with your existing Human Resource Information System (HRIS) like Workday and ADP, as well as Azure Active Directory, so your lists will automatically update as employees join and leave your organization.

Employees using Outlook for Desktop dark mode settings

Emails created with ContactMonkey’s email design tool are unaffected by dark modes in the majority of email clients. However, if your employees use Outlook for Desktop, emails made with ContactMonkey will be subject to dark mode. Fortunately, ContactMonkey has you covered.

Use the best practices we described above, like creating alternate graphics and fonts that maintain their contrast in dark mode. Once you’ve designed your dark mode email, use the dark mode preview in ContactMonkey’s email template builder to see how your email will look in your employees inboxes:

Ensure all of your images and text have adequate contrast so your employees don’t struggle to read them. You can use the file manager in the email template builder to create a specific location to store all your dark mode images.

FAQ

What is dark mode?

What is dark mode? Dark mode is a popular display setting on electronic devices and software that inverts the white background and black text colours in order to reduce the amount of light given off by a screen.

How does dark mode affect emails?

How does dark mode affect your emails? Dark mode affects emails by inverting the background and font colours displayed on screen. But not all backgrounds are affected the same way: image backgrounds behind text can remain unaffected, which can render previously easy-to-read text near invisible if the backg

Which email clients have dark mode settings?

Which email clients have dark mode settings? Dark mode is found on most popular desktop and mobile operating systems, like Android, iOS, Mac OS, and Windows. It is also included on many email applications, like Apple Mail, Outlook, and Gmail.

How should you design emails for dark mode?

How should you design emails for dark mode? To design email for dark mode, retain contrast when the background and font colours get inverted. Avoid having text on top of images, and feature images on a high-contrast background or use a high-contrast outline to make the images stand out.

Email Design to Match Any Display Setting

Dark mode is here to stay, so prepare for how that will affect your employees’ experience of your internal emails. Be conscious of how dark mode will affect how your emails will display, and follow our best practices to ensure they look great no matter what device your employees use.

If you send a lot of emails to employees using dark mode, consider using ContactMonkey to guarantee they look amazing. Not only do emails built with ContactMonkey’s email template builder display perfectly in dark mode, but you can collect employee feedback and email analytics to measure how your employees interact with them.

Curious to see how else ContactMonkey can improve your internal communications? Book a free demo to get a first-hand look at our all-in-one internal communications platform.