A Logo for Dark Mode — How to Adapt It

A logo that looks flawless on a white site is placed into a dark interface — and it either merges with the background into unreadability or grows an ugly white rectangle. Dark mode has long been a standard, supported by websites, apps, and operating systems themselves, so almost every brand eventually hits this problem. The good news is that it has only two causes, and once you understand them, a solution is easy to pick.

Why a mark disappears on a dark background

The first cause is a dark mark color. A black or dark‑blue logo is contrasty on white, but on a near‑black background its contrast drops almost to zero and the mark simply dissolves. The second cause is an opaque backing: if the logo is saved as PNG or JPG with a white background, a white rectangle appears around it on a dark page. Often both causes occur together, and then the mark both merges and "sticks" at once.

From simple to robust: how it's fixed

Since there are two causes, the solutions build up in escalation — from the easiest to the most fundamental.

The simplest case is a monochrome mark. If the logo is single‑color, inversion is enough: black on the light theme, white on the dark one. This works because such a mark carries information through shape, not color — and if it's in SVG, the inversion is easiest right in the code, by changing the fill value (how to change colors by hand — in how to change a logo's color). How to reduce a mark to one color, if it's still colored — in a black-and-white logo.

But for a colored mark inversion no longer works: a literal recolor ruins the brand colors — blue becomes orange, red becomes cyan. So here the next level is needed — a separate version for dark backgrounds, prepared in advance. Usually it keeps the brand colors as they are but lightens or replaces only the element that "vanished" (e.g. black text becomes white), and if needed adds a thin outline. That's exactly what large brands do: Apple, Google, and Spotify specify separate light- and dark‑background variants in their guidelines — part of the brand identity fixed in the brand book. Many logos in our catalog already include such variants in the versions block.

But even a perfectly chosen color won't help if the file has an opaque backing — so at the base of any solution lies a third, fundamental condition: a transparent background. And here vector helps again: in SVG transparency is built into the format's nature — there's a background only where you explicitly drew a fill — so SVG is almost always safer for dark mode than a raster file. More on the file itself — in a logo with a transparent background.

On a website the versions switch themselves

When all versions are ready, one last step remains — and on a website you don't do it by hand. The browser already knows which theme the system has chosen, and the prefers-color-scheme media query substitutes the right file itself:

.logo { content: url("logo-dark.svg"); }        /* default — for the light theme */
@media (prefers-color-scheme: dark) {
  .logo { content: url("logo-light.svg"); }     /* the white version for dark theme */
}

A user with a light system theme sees the dark logo, and one with a dark theme sees the light one — without a single line of JavaScript. The same trick works for the favicon, where you can also define a separate version for the browser's dark theme.

What to plan for in advance

To avoid redoing it, keep a few nuances in mind. Contrast should be checked for real, not "by eye": elements that are too dark get lost even on a non‑black gray. And "dark mode" almost never means pure black — most interfaces use a dark gray like #1e1e1e, so the mark should be tested on a real background, not #000000. And finally, don't breed versions without need: two variants, light and dark, are almost always enough, and if the mark also has to work at different sizes, that's a neighboring task — an adaptive logo. All of this is far easier if the source is vector: from SVG any version takes a minute, from a finished PNG — no longer.

There's a separate case worth mentioning — when you can't control the background at all, for example when the logo goes to partners, into other people's presentations, or onto platforms where it'll land on who‑knows‑what. Then two versions aren't enough, and a third, "neutral" option helps: a mark with a thin outline or on its own small brand‑color plate that reads on white, on black, and on a busy photo. It sacrifices some elegance for reliability but won't vanish anywhere. It's sensible to keep such a universal option in the set alongside the light and dark versions and hand out exactly that one when you don't know in advance what background the mark will end up on — it saves you from sorting things out after the fact.

The short takeaway

A logo disappears on a dark background for two reasons — a dark mark color or an opaque backing — and the solutions build up in escalation: a monochrome mark needs only inversion, a colored one needs a separate light version, but at the base of everything lies a transparent background, without which no chosen color will help. On a website the versions should switch automatically via prefers-color-scheme, and the source should be kept as vector — then any dark‑mode version is a minute's work.

Logos in the Trace Logo's catalog can be recolored right in the browser, and you can download a ready light or dark version in SVG and PNG.