The logo disappears or looks wrong in dark mode
Why a logo can vanish, clash or change colour when a recipient reads in dark mode, how to preview it, and the practical fixes.
When someone reads email in dark mode, their mail app changes the colours of the message so it suits a dark screen. Your signature is part of the message, so it changes too. Footer365 sends one version of the signature to everyone and cannot tell whether a recipient will read it in light or dark mode, so the signature has to look right in both.
Why it happens
Mail apps do not agree on what dark mode means:
- Some change only the light parts. A white background becomes dark and dark text becomes light. Coloured backgrounds and light text are left alone. Many versions of Outlook work this way.
- Some invert every colour, so a dark block you designed becomes light, and a light one dark.
- Some leave the message exactly as it was sent, showing your white background inside a dark window.
In almost all of them, images are left as they are. That is the root of most logo problems.
1. A dark logo on a transparent background vanishes
This is the most common problem. A logo saved as a PNG with a transparent background has no background of its own. In light mode it sits on white and looks fine. In dark mode the mail app makes the background behind it dark, and dark lettering in the logo disappears into it.
Fix: give the logo a background of its own, built into the image file. Save a version with a white or light rectangle behind the artwork, or with a thin light outline around dark lettering, and upload that. A background that is part of the image travels with it and is not changed by dark mode.
Putting the logo in a light-coloured box in the template does not help in the same way: the box is a colour, not an image, so a mail app that darkens light backgrounds darkens the box as well.
2. A white logo meant for a dark block becomes invisible
If your design puts a white logo on a dark coloured block, an app that inverts every colour turns the block light while the white logo stays white.
Fix: as above, bake the dark background into the image itself rather than relying on the block behind it, or choose a logo version with a mid-tone colour that reads on both light and dark. A brand kit can hold a Logo for dark backgrounds for a block you have drawn yourself, and you pick it from the image library like any other image. It is not swapped in by itself when a recipient reads in dark mode, because Footer365 sends one version of the signature to everyone. See Brand kits and the image library.
3. Brand colours change
Text and background colours can be lightened or darkened by the recipient's app, so a dark brand colour may come out lighter in dark mode. You cannot stop this from the sending side.
Fix: mid-tone colours change the least. If a particular colour must stay exactly as it is, such as the colours in a logo, put it in an image.
4. Icons or dividers vanish
Thin dark lines and small dark icons can disappear on a dark background in the same way as a logo.
Fix: use a mid-tone colour for dividers and icons, or icons with a coloured background shape so the icon stays visible whatever is behind it. Social icons, WhatsApp, booking and QR
Check it before anyone sends it
In the template editor, the preview has a Dark mode button (its tooltip is Dark-mode preview). It shows your signature on a dark background with colours changed in the way many versions of Outlook change them. Select Light mode to switch back.
For a closer look, select Email clients, which opens previews that See how your signature looks in Outlook, OWA and Apple Mail. The same dark mode switch is available there.
The preview is a guide, not a guarantee, because every mail app has its own rules. After a change, send a test message to yourself and open it in dark mode on the devices your recipients most often use, such as Outlook on Windows and the Mail app on an iPhone.
The quickest fix for most logos is a PNG with a solid white background and a little space around the artwork. It looks deliberate in dark mode, like a small white card, and it can never disappear.
Related
Still stuck?
Tell us what you were trying to do and what you saw. Include the sender, a recipient and roughly when a message was sent, and we can trace it.