How to Optimize Your Email Signature for Dark Mode

In general, dark mode changes the usual black text on a white background to white text on a black background. In the case of non-black/white text, font colors that are clear and readable in dark mode are retained while those that are not will be converted to a closely related color to improve readability. Backgrounds are much simpler as they are white by default and change to black (or a dark shade of gray) for dark mode. 

Aside from aesthetics, the main purpose of this feature is to reduce blue light exposure emitted by digital screens. Uncontrolled exposure to blue light can lead to a number of health issues. These issues can range anywhere from eye strain and poor sleep to depression and increased risk of certain cancers, particularly for those working night shifts. 

For plain text email signatures, it functions exactly as described. This makes determining the resulting email signature very easy and eliminates the need to make adjustments to them. On the other hand, HTML email signatures are a completely different story. Due to the addition of CSS styling and graphics, a lot more thought and testing is required to optimize your email signature for dark mode.

To top it all off, dark mode does not work the same way for all email clients. This means that an email signature can vary in appearance depending on the email client used. Unfortunately, it is not possible to directly control the resulting email signature as email clients have free rein over how they apply dark mode. 

Font colors in particular can be frustrating to work with as it is unclear whether a certain shade of color will be converted or not without actually testing it.

Generally speaking, darker fonts will turn lighter in dark mode to make the text more readable.

Hyperlinks will generally be converted from a dark blue color to a lighter blue.

If you have any borders or separators in your email signature (such as <td> elements with a background-color set), dark mode will change that background color if required so it’s visible to the recipient.

Testing shows that dark mode treats borders and separators the same as fonts.

Images without transparent backgrounds will show up with a white background.

Using predominantly dark images with transparent backgrounds is also not advised as the images would simply blend in with dark mode, making it hard to distinguish the image.

Being able to control how dark mode affects email signatures would be the ideal scenario. Unfortunately, this is not the case. Given that each email client has full control over what changes will occur to an email signature in dark mode, there is actually very little that a user can do to influence this. Adapting email signatures to dark mode will heavily depend on their design and the amount of testing done.

While a lot of email clients support CSS media queries such as the “@media (prefers-color-scheme: dark)” which lets you specify the styles to use when in dark mode, you cannot use these styles with email signatures…and here’s why.

When you copy an email signature and paste it into your email client, most of the time, the email client will completely strip any <style></style> tags and the code inside it. Why? Because email clients want you to adhere to their styles. You can still use inline styles, which is how you can change fonts and styles on email signatures, but you cannot have <style></style> tags. This is why email signatures are really painful to work with, because even though something should work, it doesn’t mean that it will. We recommend using an email signature generator when making your email signature – so you can avoid the pain.

This is a common misconception that often results in confused and frustrated users. Despite how simple the concept of dark mode is, each email client does it differently. Email clients like Gmail only apply dark mode to their interface but not to their emails (they still appear the same way). On the other side of the spectrum, Outlook applies a dark grey background to its emails instead of black. These differences make it quite difficult for both designers and users.  

Email clients implement dark mode in one of two ways: 

• Partially Inverted – This involves inverting light backgrounds to dark backgrounds while leaving already dark backgrounds as is. The same is done to the text. Dark text becomes light but already light text stays the same. An example of this would be Outlook.com.  
• Fully Inverted – This mode inverts almost everything in the email regardless of whether the text is light or dark. In addition to inverting dark elements to their light counterparts, light elements are also inverted to become dark. This invasive mode makes it harder to optimize your email signature for dark mode. Outlook 2019 is one example of this. 

Although it would be nice for email clients to optimize images for dark mode, this is not what happens. Email clients generally follow “what you see is what you get” for images. This means that they cannot display an image differently from what was originally provided.

Alterations and modifications to the signature must be done prior to ensure that they display as desired. This is why creating a “dark mode friendly” image is important.

Unlike in light mode (or default) where a font color will be rendered as-is, dark mode will automatically convert a font color to a different one if it deems it difficult to read or has low visibility on a dark background. This very feature unintentionally causes certain font colors to be unusable if the email client deems them illegible. But this feature does not affect text in images.

Having an email signature that works well on both light mode and dark mode should be obvious. However, many tend to focus on only one mode which causes their signatures to look dreadful once in a different mode.

It is important to keep in mind that not everyone uses dark mode and vice versa. A poorly adapted email signature (to both modes) can easily dissuade a recipient from replying which is a lost opportunity. 

Dark mode’s popularity amongst email users has increased significantly since it was first introduced. So much so that dark mode compatibility for email signatures has become a must-have for most email users. 

To help with this, the following are the things to keep in mind when you optimize your email signature for dark mode: 

Adjusting a signature to be compatible with dark mode is hard enough for most, let alone constructing it from scratch using HTML. Unless you’re highly skilled in HTML coding (or want a challenge), it’s simply better and easier to use an online generator to create an email signature.

Not only does it eliminate coding altogether, but it also allows you to focus on adjusting the elements of a signature for dark mode.

Unlike text, images, and by extension icons, are the one thing that email clients/apps will never adapt to dark mode. This means that making the appropriate changes to images before adding them to email signatures is absolutely necessary.

The changes needed will vary depending on the image used. However, the most common change is using a transparent background. PNG images support alpha channels, so this is a perfect format for images that have transparency. This allows the image to adapt to whatever theme or background an email client/app is set to use. Without this, images with white backgrounds will look out of place once they are in dark mode due to background mismatch.

Images that utilize dark colors are normally unsuitable for dark mode as they tend to blend in with the dark background and have low visibility. Although going for lighter colors might be possible, this may cause certain logos to go off-brand. In cases like these, it is important to add white outlines or strokes around the edges of the images. These outlines or strokes will not appear against a white background which is not an issue for dark-colored logos. Their real value comes once they are used in dark mode as they allow the dark-colored images to be easily distinguished from the dark background. This allows the use of dark colors for images regardless of which mode they are used in.

Using an image as your whole email signature will mean that both text and images (inside the signature image) share the same background, which ultimately defeats the purpose of dark mode. Making changes to these signatures is difficult and not scalable at all. Also, your recipients won’t be able to directly call you from the phone number in your signature by tapping on it, and they won’t even be able to copy your phone number to paste it into their dialler – which doesn’t look good.

Another important thing to consider is the default email security of most, if not all, email clients and apps. Email clients and (some) apps will block images in messages by default. Although this can be changed in most of them, not all users know about this and some even consider this an issue with the email signature (which it is not). This means that a single-image signature will basically not appear in the message unless the recipient knows how to deal with this on their end.

Choosing just any font color and calling it a day is ill-advised as it can end up ruining your email signature. A darker font is always a safe bet as more often than not, it will be converted to a light and readable font in dark mode. But this isn’t always true the other way around. Looking at the example below which was tested in Outlook 2019, you’ll see that red and blue were converted to a lighter version of both respective colors, but green was turned into a darker green, and this is why testing is so important.

Contrast-ratio.com can offer a glimpse of how a certain font color will appear on a dark (or light) background. It is possible to set the background color and text color either by providing the exact color name or its corresponding HEX code. The site can also swap the given colors. However, this does not take into account or even show how any email client/app will adjust text in dark mode, so keep that in mind.

The actual font family you use is another important consideration. Email clients may alter the font weight of text when converting to dark mode. Basically, font weight is how thick the text will appear. Text in dark mode normally becomes (slightly) thicker to help with readability. This also means that font styles that are already thick may become too thick. The reverse can also be true where the font weight becomes thinner.

When it comes to email signatures, conceptualizing and designing is often not enough; testing is always a crucial part of the process. Due to the somewhat unpredictable nature of dark mode, email signatures may not always be rendered as designed. Ignoring this fact will surely result in even the best-designed email signatures performing worse than expected. 

In most cases, testing email signatures in dark mode involves a lot of trial and error. This is especially true if the signatures need to have a good degree of consistency across more than a few email clients and apps.

Apple Mail, Gmail, and Outlook are always the best email clients to start testing due to their overall popularity among email users. Even if you don’t use any of the three, the likelihood of a recipient of your email using them is still very high and thus should not be disregarded. Of course, it goes without saying that if you use a different email client, optimizing for that one first is best.

Since dark mode behavior varies from one email client to the next, the overall goal of testing is to ensure that the email signature will be displayed with an acceptable degree of consistency across as many platforms as possible. Getting the signature to be perfect for both light and dark mode is incredibly difficult. The best thing is to ensure that the differences in how it displays are kept to a minimum. 

Lastly, one of the most overlooked considerations is to ensure that the signature will display just as well, if not better, in light mode. Some email clients like Gmail, Yahoo, and Thunderbird still use light mode for their emails even if dark mode is enabled. Fortunately, it is relatively easier to design a signature for light mode compared to dark mode as the outcome is more predictable. 

Although dark mode is available for most, if not all, email clients used today, the steps involved in enabling it may differ. Below are the steps on how to enable dark mode for some of the most commonly used email clients and apps: 

Dark mode for Apple Mail is enabled via its System Preferences instead of in the email application itself.

Apple Menu > System Preferences > General > Appearance: Dark or Auto (Auto switches between light during the day and dark during the night based on your system clock)

The default Mail app for iPhone/iPad can be changed to dark mode via the device settings.

For iOS 13 or later: Settings > Display and Brightness > Dark

Setting a dark theme as your device system default will change most apps to use the same theme.

Gmail does not apply the selected theme to its emails, only to its interface.

Setting button > Theme > Select a dark background; if not shown, click View all > Scroll down and locate a dark background theme

OR

Settings button > See all settings > Themes tab > Set Theme > Choose a dark background theme

iOS 12 and below: In the Gmail app, tap on the Menu button > Scroll down and tap Settings > General > Theme > Tap Dark

iOS 13 or later: Settings > Display and Brightness > Dark

Setting a dark theme as your device system default will change most apps to use the same theme. If this does not work, check the in-app settings instead. 

In the Gmail app, tap on the Menu button > Scroll down and tap Settings > General > Theme > Tap Dark

In Outlook, click on File > On the left pane click on Office Account > Under Office Theme > Choose Black

Once this has been set, you will be able to toggle it ON or OFF when reading emails via the Switch Background button beside the Reply button.

For Outlook on Mac, there is no Dark mode setting in-app. Instead, dark mode must be enabled via its System Preferences.

Apple Menu > System Preferences > General > Appearance: Dark or Auto (Auto switches between light during the day and dark during the night based on your system clock)

In the upper right corner, click on Settings > Toggle ON Dark mode 

In the Outlook app, tap on the Menu button > Settings (shown as a Gear Icon) > Under Preferences > Theme > select Dark 

To optimize an email signature for dark mode, the following adjustments need to be made: 

• Images (including social icons) should have transparent backgrounds and should also have white borders or shadows (if dark) to increase visibility in dark mode.
• Font colors and styles should be carefully selected so email clients don’t make your text illegible in dark mode.
• Test your email signature in all the popular email clients to ensure compatibility.

Following the points in this article should help you optimize your email signature for dark mode.