How to prepare your email signature for dark mode

Dark mode is a somewhat new user interface trend that is becoming increasingly popular with users. It is available across most devices and software applications today. It is a setting that users can turn on to "reverse" the screen. Where a typical program might have a white background and black text, a dark mode device would have a dark grey background (not quite black) and white text. It doesn't literally reverse everything on the screen like a photo negative, photos still appear as normal and some programs like games do not apply dark mode at all.

Why Is Dark Mode An Issue for Email Signatures?

Because many email programs follow the preferences of the user for dark mode, that means that some people are not reading their emails with a white background like you might expect. Instead with dark mode enabled they are viewing your email with a dark grey background and white text. This can be on their mobile device, their desktop computer, or both!

This means that any designer that is designing for email should be aware of how their design is being viewed in dark mode. In an HTML email like a newsletter or promotion it can be easier to control the design in dark mode through code, but email signatures live in a strange middle ground: They are generally at the bottom of a "plain text" email, but they themselves may include designed elements like logos, colors, varying fonts, and links. This puts them at a strange crossroads of interpretation and means that the "translation" to dark mode isn't quite as easy as flipping a switch.

When Was Dark Mode First Introduced To Email:

• MacOS Mojave - September 2018
• Windows 10 - May 2019
• iOS 13 - September 2019
• Android 10 - September 2019

Why Do People Choose Dark Mode?

Some people claim that dark mode makes it easier to read the screen and reduces eye strain when using a device for a long amount of time. It may be better for battery life since it uses less energy, and it is better in low light settings. To be honest many people just it purely out of preference. They like how it looks and it offers something different than the typical white background.

What Happens To My Email Signature Design in Dark Mode?

• Black or grey text is reversed and appears white.
• Some text and link colors can be inverted by the email client to appear better on a dark grey background. For example a dark red might be lightened to appear pink.
• Transparent Logos (especially with any dark elements) can get lost or obscured.
• Logos saved with a white background will have a white box around them.
• Background colors may be inverted by the email client.

The Bad News:

I'm sorry to be the bearer of bad news here, but much of what happens with signatures in dark mode is not within our control technically speaking. Since email signatures still seem to be a distant afterthought for companies developing email clients and dark mode is relatively new they haven't given us a lot of tools or options to control them in dark mode. What most email clients do is convert them to make the email signature readable on a dark background. They put them through a filter to change them for the "better". Unfortunately better is subjective. What this usually means is that if your brand color is a bit darker it gets lightened automatically, which may be more readable, but generally isn't what a designer would choose to do.

What You Can Do:

Since there are no magic solutions to fix your email signature in dark mode by adding a certain tag or making an alternate version what you can do is carefully consider the elements you add to your email signature in order to optimize it for dark mode. Here are some things we would recommend:

Consider your logo and other images

Generally we recommend using a logo with a transparent background (a PNG, not a GIF). This removes the unsightly white box that would appear in dark mode. The problem is when a logo uses black or dark text, then those elements of the logo (often the name of the company!) can be lost or obscured by the background. If you can, choose a version of your logo that uses vivid colors that would stick out on both a white and dark background. If that isn't possible consider adding a white stroke or white glow around dark letters or elements. This white shading would be invisible on a white background but help dark letters be more legible on a dark background. Unfortunately, these kinds of effects are best applied by design software like Photoshop or Illustrator.

Beware of Depending on Background Colors

Because email clients can do wildly different things with a background color depending on which email client and how dark or light the color is, sometimes the results are unpredictable. If you want predictable results then it may be best to not rely on a background color.

Consider your text colors

Be aware that colors that are too dark, or too light will most likely be inverted in dark mode. This means that your brand color may be lost or converted to a different color. Some email clients are smart enough to detect the background color of an area and intelligently decide whether to invert a color based on its contrast ratio. Other email clients just invert every color they find regardless of the background. This is frustrating

Test your email signature in dark mode and test again!

Test, edit and test again! The more you understand what is happening to your email signature the better. Testing on one device is better than nothing! It's easy and worth it to switch your iPhone or Android to dark mode, view your emailed signature, and back again. If you are working a company branding project and want to get serious it may be worth getting a plan at Litmus or Email on Acid to view screenshots of your email across hundreds of different email clients. They include many of them in dark mode!

How Email Clients Handle Colors in Dark Mode for Email Signatures

What Other Solutions Have You Considered To Fix Email Signatures In Dark Mode?

Use Media Queries?

Using the @media (prefers-color-scheme: dark) is a new way that some email clients are allowing control over dark mode through CSS. Only a few of the email clients support these, but the bigger problem is that any <style> tag would get removed by almost all email clients as you paste the email signature into the signature preferences editor of that program. These editors take the HTML that you paste and remove tags and attributes to match the security and code of the email client. What may work in a marketing email sent through Mailchimp or Campaign Monitor is totally different here because of the copy and paste process the email signature has to go through.

Add a White Background?

It seems like a good idea, but unfortunately adding a white background doesn't seem to accomplish much. Some email clients ignore them and turn them transparent. Others will invert them to black, and still others like Gmail will just turn the whole email background white.

Use An Image

Converting the entire signature (including the text) to one combined image solves some issues when it comes to consistency, but it also has a slew of disadvantages. You will still have that unsightly white box around your signature. You won't be able to link any of the websites, social media icons, or banners in your email signature. Plus, images often get stripped out when replying to most emails, so it only works on the first send.

Email signatures already struggled with consistent application and appearance across email clients and the addition of dark mode hasn't helped that. While we can hope that better standards can be implemented across email clients allowing designers greater control over email signatures, for now we must live in the current situation and make the best of it. Test your signatures in dark mode, watch out for dark logos, and be careful with your backgrounds.

If you haven't tried out our Email signature generator, I'd highly recommend saving yourself some time and try making a signature there. We have done extensive testing to make sure our templates appear consistently across all of the major email clients out there. This saves you the time and frustration of doing that yourself!