How to make a logo white for dark backgrounds

A dark mode logo is a version of your logo made to stay clear on black or dark gray: usually all white, or your brand colors with the dark parts turned light. To make one, recolor the dark parts of the logo white in a vector editor, or drop the logo into the free white logo maker; then save it as SVG or a transparent PNG and use it wherever the background is dark.

Need a company’s logo first? The free Logo Finder finds it from the website address and downloads it in white, black or any color, ready for a dark background. Sources were checked on November 4, 2026.

What is a dark mode logo?

A dark mode logo is the light-on-dark version of a logo, used whenever the background is dark: a website or app in dark mode, a black T-shirt, a matte black card or a dark slide. Designers also call it a reversed logo. It keeps the logo’s shapes and swaps the parts that would vanish on black, such as black or navy text, for white or a light tint.

People choose a dark theme in their operating system or browser settings, and websites read that choice through the prefers-color-scheme media feature, which is used “to detect if a user has requested light or dark color themes” (MDN). A logo made only for white backgrounds looks broken on those pages, which is why a brand needs both versions.

When do you need a dark mode logo?

You need a dark mode logo anywhere your logo sits on a dark background: a website or app with a dark theme, an email opened in dark mode, a dark slide, video or social banner, and dark products such as black shirts, matte black cards, foil on a deep color or white ink on a dark bag. The table matches each background to the version that reads best.

To see a white or foil logo on a matte black card before it is made, drop it into the free 3D credit card mockup generator, or press Try it on a card in 3D in the Logo Finder: one click turns the logo into gold foil or spot UV on a true-size card under studio light. Proofscene accounts keep one logo for dark backgrounds and one for light, and the Logo Finder’s Save as my logo buttons put either one straight into your company’s logo settings.

How do you make a white version of a logo?

The quickest way to make a white version of a logo is to recolor every shape in it white, which takes one click in a white logo maker or about a minute in a vector editor. Pick the method that matches the file you have: a one-click tool for any file, a design program for a vector master, or one line of CSS for a logo already on a web page.

1. In one click, free

Drop your logo into the white logo maker and choose White, Black or Any color: the whole logo turns that one color on a transparent background. It takes PNG, JPG, WebP, GIF, AVIF, SVG, PDF, AI and PSD files, works inside your browser so the file never leaves your device, and downloads the result as SVG, PDF, EPS or a transparent PNG up to 4096 px.

2. In Illustrator, Figma or Inkscape

Open the vector file, select all the shapes and set their fill to white (#FFFFFF), and their strokes too if the logo has any. To keep a bright accent in color, select only the dark shapes instead. View the result on a black artboard, then save an SVG for screens and a PDF or EPS for print. Logo file formats, explained covers which file goes where.

3. In CSS, on a website

On a web page, one line turns any logo image white. brightness(0) makes an image “completely black” (MDN) and invert(1) “applies a complete inversion” (MDN), which turns that black into white. Because it turns every color white, it suits one-color logos best.

.logo-on-dark {
  filter: brightness(0) invert(1);
}

For a logo placed inline as SVG, set its shapes to fill="currentColor". The currentColor keyword “represents the value of an element’s color property” (MDN), so the logo takes the text color of the page around it: light text in dark mode brings a light logo with it.

How do you make a logo white in Canva, Photoshop or PowerPoint?

Each of these apps can make a logo white in under a minute: Canva recolors logos whose colors it can edit, Photoshop turns a logo layer white with an overlay, and PowerPoint does it with the brightness of the picture. For a logo the app cannot recolor, make the white version once in the free white logo maker and insert that file instead.

In Canva

Select the logo in your design. If its colors appear as color tiles on the toolbar, click each tile and choose white in the Color panel that opens (Canva Help Center). Canva notes that when no color tiles appear, the element’s colors can’t be changed, as with a logo uploaded as a PNG or JPG picture. For those, bring in the white PNG or SVG: open the Uploads tab, select Upload files and pick it (Canva Help Center).

In Photoshop

Put the logo on its own layer with a transparent background, then turn every pixel of it white: a white color overlay layer style does it in one step, and a Hue/Saturation adjustment with Lightness at its highest gives the same result. Check it on a dark layer underneath, then export a PNG with transparency, never a JPG, so the white logo keeps its clear background.

In PowerPoint

Select the logo, open the Picture Format tab, choose Corrections, then Picture Corrections Options, and move the Brightness slider all the way up (Microsoft Support). A logo on a transparent PNG turns white while its background stays clear, ready for a dark slide. The same Corrections button sits on the Picture Format tab in Word.

For motion, the free spinning logo GIF maker turns the white version into a spinning logo on a dark background, as a looping GIF or an MP4.

Should a dark mode logo be pure white?

A dark mode logo does not have to be pure white: all white is the safest choice on photos, video and busy backgrounds, while a two-tone version that keeps a bright brand color often looks more like the brand on plain black. What matters is that every part stays visible: black, navy and deep brown parts must turn light, while a bright accent such as yellow or light blue can stay as it is.

The accessibility standard leaves the choice to you: WCAG says “text that is part of a logo or brand name has no contrast requirement” (W3C). The 3:1 ratio the same standard sets for large text is still a sensible floor for a logo people must read at a glance. Three checks help:

• Thin lines and small text, such as a tagline under the mark, need the strongest contrast; white is the safe pick for them.
• Dark gray backgrounds, common in dark themes, sit closer to mid-tone colors than black does, so check the logo on the real background, not only on pure black.
• Brand colors that carry the identity, like a red mark, can often stay; test each one against the dark background at the logo’s smallest size.

The Logo Finder lets you switch any logo’s preview between black, gray, white, a checkerboard and the brand color, so each version is judged on the ground it will sit on.

How do you show a dark mode logo on a website?

To show a dark mode logo on a website, give the browser both files in a <picture> element and let the prefers-color-scheme media feature choose: visitors in dark mode get the white version, everyone else gets the original. GitHub supports the same pattern for light and dark images in README files (GitHub changelog). The markup:

<picture>
  <source srcset="/logo-white.svg" media="(prefers-color-scheme: dark)">
  <img src="/logo.svg" alt="Company name" width="200" height="50">
</picture>

Two other routes suit other setups. A site with its own light and dark theme switch can swap the logo with the same CSS class that switches the theme. And an SVG placed with an <img> tag can carry its own @media (prefers-color-scheme: dark) styles, which follow the color scheme of the page that embeds it, as MDN explains:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <style>
    .mark { fill: #0e1b2c; }
    @media (prefers-color-scheme: dark) { .mark { fill: #ffffff; } }
  </style>
  <path class="mark" d="M10 10h40v30H10z"/>
</svg>

How do dark mode logos work in email?

Email programs handle dark mode in three different ways, so a dark mode logo in email has to survive all three: some leave the colors alone, some invert only light backgrounds, and some invert everything. Litmus’s dark mode guide for email marketers, with a client chart dated February 2025, groups the programs like this:

Litmus suggests three fixes: use transparent PNGs, add “a glow or solid white stroke around an icon or logo” so a dark logo reads on any background, and swap in the white version with @media (prefers-color-scheme: dark), which its chart lists as supported in Apple Mail on macOS and on iPhone and iPad (Litmus). Signature logo sizes are in logo sizes for web, social, email and print.

Does a favicon need a dark mode version?

A favicon needs a dark mode version when it is dark on a transparent background, because browser tabs in a dark theme are dark too. An SVG favicon can carry its own @media (prefers-color-scheme: dark) styles and switch colors with the theme, which web.dev’s guide to adaptive favicons says works in Chromium-based browsers and Firefox; keep a favicon.ico beside it for every other browser (web.dev).

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

The simplest favicon reads in both themes without any switch: the mark on a square of its own solid brand color. The Logo Finder’s favicon pack builds the ICO, PNG icons from 16 to 512 px and the site.webmanifest from any logo, the favicon grabber shows how other sites do theirs, and logo sizes lists each favicon size and where it is used. To find a company’s logo by hand first, see how to find a company’s logo.