How to Make Your Email Signature Look Good in Dark Mode Too – MUO – MakeUseOf

Does your carefully crafted email signature suddenly look terrible in dark mode? Here’s how to design an email signature that works in both modes.
Email signatures are easy wins when it comes to personal branding. They show professionalism, they add to brand recognition, and they're free marketing!
The only problem? With so many people viewing emails in dark mode these days, there's a chance your carefully-crafted email signature sometimes isn't presenting well.
The dark mode is notorious for breaking email signatures, but there are steps you can take to make sure your signature looks excellent no matter which mode your recipients view it in.
Dark mode is a display setting on digital screens that inverts the traditional presentation of dark text on a light background.
Instead, users see light text on a dark background.
Its usage has exploded in popularity over the past few years, which means many of the emails you send out will be read in dark mode by your recipients. Unfortunately, as the email sender, you cannot control whether your recipients view your email in light or dark mode.
When your device is in dark mode, your mail app will change the presentation of your emails, including your email signature. We've explained what dark mode is and how it works in a previous article.
There are a couple of different ways email apps like Apple Mail, Gmail, and Outlook handle dark mode.
In full dark mode, the mail app changes the colors of the emails it displays. The email app swaps the original dark text with white text. The app may even attempt to invert the colors of images within the email, though this is much less common.
It will, however, typically invert HTML colors coded into the email signature.
This translation process can turn a thoughtfully-designed email signature into a hard-to-read mess in a hurry, which is why it's a good idea to design your signature with the dark mode in mind.
Gmail is one example of a mail app that employs full dark mode. The example above shows how a well-designed email signature in light mode is poorly translated into dark mode by the Gmail app.
Pseudo-dark mode is a bit of a lazy attempt at dark mode, as it doesn't give readers the benefits associated with lighter text on a darker background.
In this situation, the mail app itself is in dark mode, but email contents are left untouched and displayed on a light background.
The only thing you have to worry about in these situations is the padding around your email signatures. If your signature has no padding, the signature will be butted up directly against the background.
There are five steps you can take to help your email signatures look as good in dark mode as they do in light mode.
There are many dedicated email signature generators out there. Not all of them are designed with the dark mode in mind, however. Some will use icons with white backgrounds or turn the signature into one big, clunky image file.
The most popular free email signature generators have a few different signature layouts to choose from. Some of those will work well in dark mode, while others won't. When previewing designs, view them in both light and dark modes on your devices.
If you're uploading your own logos and images, make sure to follow the guidelines below regarding transparency and outlining.
Many people save their images on a white background, assuming they will always be displayed on a white background. (Or not realizing that the background is saved as well.)
Individual images on white backgrounds tend to look clunky and unprofessional in dark mode. It's best to ensure any images you use in your email signature have transparent backgrounds unless you're intentionally adding a background color. Typically, transparent files should be PNG or GIF formats, with PNG being the most common.
If you add background colors to your image files, make sure you know they work well in both modes. For example, vivid colors such as bright greens, yellows, and reds work well on both light and dark backgrounds.
If you use dark text or graphical elements in your email signature image, try outlining them in white, or at least in a lighter color.
It can be the difference between a graphical or text element completely disappearing and looking great. However, this only works if you've also used a transparent image. For example, outlining your primary graphic in white won't make a difference if you've still got a white background!
This step is geared towards signatures displayed in pseudo-dark mode. Adding padding around the edge of your signature will stop it from looking crowded if an email app drops your entire signature onto a white background.
Adding padding can be a bit tricky from a technical perspective. It's also admittedly minute detail. However, this is a step you'll probably only worry about if you want your email signature to look 100% perfect in all circumstances. For example, if you're a graphic designer, this might be a detail worth your while to correct.
Send yourself test emails and try opening those emails on various devices and screens. Try standard settings you know your recipients will be using. For example, if most of your clients use Outlook, make sure you test it in Outlook.
Check out our guide on how to enable dark mode in popular Android apps or how to use dark mode on your iPhone or iPad if you're an iOS user.
If you're putting effort into designing a professional email signature, it's worth ensuring that it looks good across all mediums.
You can't be sure how it looks until you test it.
Dark mode is growing in popularity with everyday device users, UX / UI designers, and device manufacturers.
If you're putting effort into professionally branding your email signature, it's worth making sure it looks good in dark mode as well as light mode.
Nathan’s interest in tech began with his first website build over 20 years ago. His areas of interest include productivity, writing, product management, marketing, and and design tech.
Join our newsletter for tech tips, reviews, free ebooks, and exclusive deals!

source