Dark mode is already a trend of the user interface, becoming more and more popular each year. Today, dark mode is available for most devices and software applications, including popular email clients (Gmail, Outlook, Apple Mail).
What is a dark mode?
Dark mode is an interface mode that inverts colors on your devices to reduce the screen brightness. So, it changes a white background and black text to a black background and white text. The main benefit of the dark mode is easing your eyes’ strain, especially at night time.
In general, dark mode doesn't influence email template designs, and all emails look good on both interface settings.
Source: Litmus
However, there may appear some issues with all email elements in dark mode. In this article, we will cover all the problems related to email signatures. It is one of the most valuable parts of the email template, so let's find out what to do when your email signature doesn't work properly in a dark mode.
Why does dark mode cause a problem for email signatures?
Dark mode settings change the color of an interface, and many people see their emails with a dark grey background and white text. So it means that it is better to remove any dark elements from your email signature. Because if you don't do this, it may cause unforeseen issues with your signature design.
Here is a list of things that can happen with an email signature in dark mode:
- Black or grey text or links are reversed to white color to look better on a dark background.
- The email client can invert other text colors to appear suitable on a dark background. For example, a dark blue might be changed to green. It might affect your company logo, even if you use a few simple colors.
- Transparent Logos (especially with any dark elements) can get lost in the background.
- Images added with a white background will have a white box around them.
- Background colors also may be inverted by the email client.
Tips to make your email signature look great in Dark Mode
There is no fast solution to fix all issues. However, you can minimize and optimize your signature for dark mode. If you see that your email signature has some issues in dark mode, here is the best list of recommended tips you can use to make signatures meet your needs and look perfect.
Create email signatures using professional tools
First of all, create your email signatures using dedicated email signature generators. For example, platforms like MySignature allow you to get a professional HTML email signature. Moreover, there is a switching button in the editor to dark mode. So you can see how your sign will look in dark mode directly in the editor, or check how your signature looks in both: light and dark ones.
All MySignature templates proceed with extensive testing to ensure they look nicely in major email clients (both interface modes), CRMs, and other tools that support email signatures.
Use a transparent background for all images.
If you use images with background, make sure it is transparent. An image that looks good on a white background might look inappropriate in dark mode. Transparent background can help you avoid white frames around your images by taking the color from the HTML/CSS.
Make sure that all your elements are visible.
The main problem in dark mode is when a photo or logo has black or dark text because those elements of the logo can be lost in the dark background. If you can, choose a version of your logo that uses specific colors that would work on both backgrounds: white and dark. In other cases, consider adding a white stroke or glow around dark elements.
This white stroke creates a visible white background that makes dark letters more legible in a dark mode. You can use Photoshop, Canva, or similar editors to do it fast and with no struggle.
Consider your text color
Dark mode settings may convert all your signature colors to different ones. So, your branding style may be violated because of these changes. Try to avoid pure white in your text color. It is better to use not-so-bright and not too dark colors to make your text look readable. Also, some email clients invert colors based on their contrast ratio, so you can use the Contrast Ratio tool to find out how it will look.
Do not use single-image email signatures
It is not a good idea to use one image for the entire signature. It does solve the problem with the consistency of your email signature. However, it causes too many issues for you.
Firstly, you still get a white frame/box around the signature. Also, almost all your links won't be clickable because you can't add more than one hyperlink to an image. Moreover, images are often sent as attachments, so your signature may disappear in some email clients.
Test your email signature in Dark Mode
When you finish creating your email signature, make sure you have tested it in both modes to see how it looks. Just send two emails to yourself and check if it works and looks great.
Also, you can use testing tools. For example, Litmus can show you the screenshots of your emails across different email clients, and the dark mode option is also included.
Conclusion
So, by working on small changes for your email signature, you can avoid any issues in dark mode on all email clients and devices. The essential things you should cover to be safe are:
- Use professional tools for signature creating
- Add transparent background images only
- Work with your font and images colors that may be inverted
- Always test email signature before sending
Using all these tips, you can be sure that your email signature design is fully optimized and ready to use in dark mode.
