Email signature generator › Dark mode

What dark mode does to your signature

Dark mode is applied by the reader's client, after your message arrives, and different clients apply it differently. A signature that looks right in light mode can become invisible in dark, and you will never see it.

Three different behaviours

Apple Mail applies a full colour inversion to messages that do not declare their own colour scheme: light backgrounds become dark, dark text becomes light. Outlook on Windows does a partial inversion, changing some colours and leaving others. Gmail's mobile apps are the most aggressive, and Gmail on the web mostly leaves messages alone.

The consequence is that you cannot design one dark version. You have to design a signature that survives being inverted by an algorithm that does not know what your logo is.

The classic failure: the dark logo

A logo saved as dark text on a transparent background looks correct on a white message. Invert the message and the background becomes dark while the transparent logo stays dark: dark on dark, invisible.

Two fixes, and the second is better. You can give the logo a solid white background so it stays a white tile with dark text — safe, but a white rectangle in a dark message looks like a mistake. Or you can use a logo whose colours have enough contrast against both light and dark: a mid-tone brand colour, or a version with a light outline. That second one takes design work once and then never needs thinking about again.

Colours that survive inversion

Pure black text and pure white backgrounds invert cleanly, because the algorithm is designed for exactly that case. The colours that produce bad results are mid greys, which can end up nearly the same as the inverted background, and saturated colours close to the client's own link blue.

A practical rule: use near-black for primary text and a clearly lighter grey for secondary text, and check that the two are far enough apart that they stay distinguishable when both are lightened.

Declaring a colour scheme

Some clients respect a color-scheme declaration and a prefers-color-scheme media query, which lets you supply explicit dark-mode colours instead of accepting the automatic inversion. Apple Mail honours this; Outlook for Windows does not, and Gmail strips style blocks so it cannot see the media query at all.

It is therefore worth adding for the clients that honour it, and it is not a substitute for a signature that degrades acceptably without it.

How to check without switching your whole machine

Send the signature to yourself and open it in the Gmail app on a phone with the system in dark mode, and in Apple Mail with dark appearance on. Those two cover the aggressive case and the full-inversion case. Thirty seconds each, and they show you the failure that no amount of reading the markup will reveal.

Testing it properly, and what to look at

Send the signature to yourself and open it in two places: the Gmail app on a phone with the system in dark mode, and Apple Mail with dark appearance. Those are the aggressive case and the full-inversion case, and between them they expose almost everything.

Look at four things in order. Is the logo still visible against the new background. Is the secondary grey text still distinguishable from the primary text, or have both been lightened into the same value. Are the links still a different colour from the body. And is any border or divider you used still present, or has it become the same colour as what it was separating.

Dividers and borders

A thin light-grey rule between the logo and the text is a common signature element and it is the first thing to disappear under inversion: light grey becomes dark grey, and a dark grey line on a dark background is invisible. If a divider carries structural meaning, give it a colour with contrast in both directions — a mid grey around #888 survives inversion in a way that #eee does not.

What a colour-scheme declaration looks like

For the clients that honour it, adding <meta name="color-scheme" content="light dark"> to the message and supplying explicit values inside a @media (prefers-color-scheme: dark) block lets you choose the dark palette rather than accepting an automatic inversion. Apple Mail respects it. Outlook for Windows does not, and Gmail strips the style block, so this is an improvement for some readers rather than a solution.

Frequently asked questions