By Mehdi HassanHow do you put a logo on a dark background?
You put a logo on a dark background by using a reversed version made for it: usually the mark in white, or in a lightened tint of the brand color, with any dark parts of the logo removed or changed. You don't take the original file and invert it, because inversion turns your brand colors into different colors.
Most logo guides stop at a white version for the footer. That covered the old web, where dark backgrounds were rare. In 2026 a startup's logo sits on dark website sections, dark product themes, dark slide templates and dark social headers, and a single white file won't handle all of them well. Reversed versions belong in the core set covered in our guide to logo file formats, alongside the primary and icon versions.
The rest of this guide covers how to build the reversed set, why it needs small optical corrections, and how to make it switch automatically in dark mode, which is the part most guides skip.
What is a reversed logo, and is it just a white logo version?
A reversed logo is a version of your logo designed to sit on a dark background, and a white logo version is the simplest kind of reversed logo. Many brands also need a two-tone reversed version that keeps some brand color, because a fully white mark can feel generic when the color is part of the recognition.
Version | What it looks like | Best for |
|---|---|---|
Full-color reversed | Brand colors adjusted for dark, with dark elements switched to white | Dark website sections, dark product themes |
White (one-color reversed) | Entire mark in white | Footers, photos, video overlays, merch |
Inverted | Original colors flipped mechanically | Almost nothing; avoid it |
Knockout | Mark cut out of a solid shape | Stickers, app icons, embossing |
Treat the reversed versions as part of the logo set, not as afterthoughts. Our breakdown of logo variations shows how each primary, secondary and icon version needs its own reversed file, so you don't end up with a white wordmark but no white icon for the favicon.
Why does a logo look different on a dark background?
A logo looks different on a dark background because light shapes on dark appear larger and bolder than the same shapes dark on light. The bright edges seem to spread into the dark around them. The result is a reversed wordmark that looks heavier and tighter than the original, even though it's the same file.
Color behaves differently too. A saturated brand blue or red that works on white can look like it's vibrating on near-black, and a dark brand color, such as a deep navy, can disappear entirely. Mid-tone colors often lose contrast against dark gray surfaces. These are the three things to correct for:
- Weight: reduce stroke thickness slightly in the reversed version, so it matches the visual weight of the original.
- Spacing: open the letterspacing a touch in small wordmarks, because bright letters appear to crowd each other.
- Color: swap saturated or dark brand colors for a lighter tint built for dark surfaces, and check the contrast against the actual background color.
How do you create a reversed logo version?
You create a reversed logo by starting from the vector master, converting each element for a dark surface, then correcting weight and color by eye. Work in the same design file as your other logo versions so changes stay in sync.
Start from the vector master
Open the SVG or source file, never a PNG. If you only have a raster file, get a vector version of your logo first.
Decide what stays in color
Pick which parts become white and which keep brand color. Usually the name goes white and the symbol keeps a lightened brand color.
Lighten the brand colors
Create a dark-surface tint of each brand color with enough contrast against your darkest background. Name it in your color system so it isn't improvised later.
Correct the weight
Place the original on white next to the reversed version on dark. Thin the reversed strokes until both read with the same weight.
Make the white version
Produce a fully white version of every logo variation for photos, video and single-color uses.
Export and name clearly
Export SVG for the web and PNG for tools that need it, with names like logo-primary-reversed.svg, and add them to your handover files.
How should a logo handle dark mode on websites and product UI?
A logo handles dark mode by switching to its reversed file whenever the theme changes, on every surface where it appears. On a website, that means swapping the image when the visitor's system is set to dark. In a product with a theme toggle, it means the logo follows the app's theme setting, not just the system setting.
On the web, browsers expose the visitor's preference through the prefers-color-scheme media query. You can use it in CSS, in a picture element with separate light and dark sources, or inside an SVG favicon so the tab icon switches too. If the logo is a single-color SVG, setting its fill to the current text color makes it follow the theme automatically.
Surface | How the logo should switch | Watch out for |
|---|---|---|
Website header | Swap to reversed file with the theme | A flash of the wrong logo on load |
Product sidebar | Follow the app's theme setting, not only the system | Collapsed icon and wordmark both need reversed files |
Favicon | SVG favicon with its own dark-mode rule | A dark icon vanishing on dark browser tabs |
Email headers | Use a version that works on both, or a padded light container | Clients that auto-invert colors |
Login and onboarding | Match the product theme | Marketing site and app showing different versions |
Product UI is where this gets detailed. The logo sits next to icons, charts and buttons that also change with the theme, so its dark tints should come from the same color tokens. We cover the wider system in our guide to dark mode UI design; the logo's reversed colors should be defined there too, not in a separate brand file.
Why email is the hardest dark-mode surface
Some email apps leave your colors alone in dark mode, some partially darken backgrounds, and some fully invert light colors. You can't control which one your reader uses.
The safest approach is a logo that works on both light and dark: for example, a mark with a thin light outline, or a logo placed on its own small solid background that you set deliberately. Test your actual email templates in the major apps in both modes before you send them to customers.
How do you place a logo on photos, gradients and brand colors?
On photos and gradients, use whichever version has the strongest contrast with the part of the image behind the logo, and choose or crop the image so that area is calm. A logo should never sit on a busy area of a photo, and the fix is the image, not the logo.
- Dark photos: white version, placed over the darkest, plainest region.
- Light photos: original or one-color dark version.
- Mixed photos: add a subtle dark overlay to the whole image, then use the white version.
- Brand-color backgrounds: a white version, or a version you've specifically approved for that color.
- Gradients: check contrast at the exact spot the logo sits, not the average color.
Avoid drop shadows and glows to rescue a logo on a bad background. They make the mark look dated and change its shape at small sizes. Write these rules into your brand guidelines with one good and one bad example each, so whoever makes the next ad or slide doesn't guess.
What should a designer hand over for dark backgrounds?
A designer should hand over a reversed and a white version of every logo variation, the dark-surface brand color tints, and written rules for which version to use where. Without those, your developers and marketers will make their own, and they won't match.
Check the handover against our list of logo files every designer should hand over. At minimum you want primary, secondary, icon and wordmark, each in full color, reversed and white, as SVG and PNG, plus a favicon set that includes a dark-mode rule. If your current files are missing the reversed set, that's a small, well-defined job, and a good one to fix before your next product launch.
