Home > Google Workspace Handbook > Email Signatures > How to Optimize Email Signatures for Dark Mode
Creating an email signature that works properly on different devices, platforms, and such primary user interface features as dark mode or dark theme must be one of your main priorities. Thus, when designing your email signatures, you should keep in mind all possible conditions that affect the way your email signatures appear.
In this article we will share everything you need to know about dark mode and how you can properly optimize your email signatures for it. You can get a better idea of dark mode in general, why it’s used, how different email platforms affect email signatures in dark mode, and what you can do to make them look good in both light and dark modes.
To put it short, dark mode is the feature that makes your background (and most of the interface) black or dark grey, at the same time turning the text to white. The opposite is light mode, which displays the interface using lighter colors for the background, and darker colors for fonts. The colors that come in between, which can be visible when dark mode is on, are usually the same.
Apart from its pleasing aesthetics, the main advantage of dark mode is its convenience for our eyes, especially in low-light environments. You might’ve Light mode often causes eye strain and fatigue during prolonged device usage. Dark mode mitigates these issues, ensuring greater visual comfort. Moreover, it also helps you stay more focused on content by significantly minimizing distractions. On top of that, it saves battery life on devices with OLED or AMOLED screens, making it an efficient option.
Standard email signatures, which are also known as plain text email signatures, do not require you to make manual adjustments. As with any other text on a device, they are automatically adjusted to dark mode with any manual procedures.
However, it’s not the case when your email signature is in HTML format. The main problem is that many email clients don’t currently support CSS media queries for email signatures. When you try to copy and paste an email signature, the email client often removes any tags and code, preferring to use their own styles instead. Although you can still use inline styles to change fonts and styles, you can’t rely on using tags.
This can make working with email signatures quite tricky and there’s no guarantee of how they will appear. To simplify the process and avoid these problems, it’s generally recommended to use email signature management tools such as BulkSignature. Using the tool, you can create professional email signatures for the whole organization that will be compatible with different platforms.
On the other hand, the factor of your email platform also has a huge impact on what your email signature will look like. Since it depends on how dark mode is applied to the email client.
| Email Platform | How it changes your email signature in dark mode |
|---|---|
Gmail (Web Version) | Pseudo dark mode is used — main parts of UI have white background. |
Gmail App (iOS) | The colors are completely inverted. |
Gmail App (Android) | The colors are partially inverted. |
Outlook (Web Version) | The colors are partially inverted. You can turn dark mode on or off. |
Outlook (Windows 10) | The colors are completely inverted. You can turn dark mode on or off. |
Outlook (Mac) | The colors are partially inverted. You can turn dark mode on or off. |
Outlook App (iOS & Android) | The colors are completely inverted. |
Apple Mail (MacOS/iPhone/iPad) | Email text is in dark mode. HTML content automatically gets a light background. |
Sometime designing an email signature may seem like a walk in the park. However, every designer should bear in mind the visibility of their email signature in dark mode, light mode, and mobile view.
Before designing your dark-mode-friendly email signature the first thing to consider should be the font color. You need to keep in mind that darker fonts become lighter to improve readability. Hyperlinks’ blue color is also affected by the change and is converted to light blue.
The color of the separators or borders in your email signature will automatically become white to ensure their visibility on a dark background. However, your email signature requires constant testing to achieve the right level of visibility.
Make sure your images are accurately cropped so that unnecessary frames are unseen on a black background. This factor is applied to logos, call-to-action banners, and any other visual elements that you include in your email signatures.
Even though most of the procedures that happen to email signatures in dark mode are out of your control, there are still several things you need to do before deploying your email signatures.
You need to thoroughly review all the elements that you use in your email signatures and optimize them accordingly for dark mode. Below is the list of points you need to follow:
First and foremost, you have to make sure your logos are in PNG format, i.e., they have a transparent background. Aside from that, you need to pay attention to the dark and black elements of your logo, as they tend to blend in with the dark background. You can either select a flashy option for your logo that is visible in both dark and light modes, or you can outline the dark letters using a stroke or glowing.
Font color is another tricky point to consider. The most significant part to remember is that different email platforms approach your fonts differently. You need to ensure that the colors you’re using are neither too dark nor light. This way you will be able to prevent the color of your font from being significantly inverted. Sharper colors end up getting reverted.
On some platforms the color invert may affect social media icons. Thus, it’s recommended to check the way they appear before deploying your email signatures. The most common solution to that would be to use monocolor. Keep in mind that matching it with your brand colors may not be successful due to the same reasons. Thus, it’s better to use neutral options.
In the process of developing a perfect email signature for different purposes, the best you can do is to test it out on different platforms. Even small changes will make a difference. Different platforms act differently. It means that you need to keep in mind.
