> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Dark-Mode SVG Logos: Choose What Controls Color

> Choose whether an SVG logo follows user preference or your page theme. Compare inline CSS, an adaptive external file and fixed artwork in a browser test.

Source: https://perfectvector.com/blog/dark-mode-svg-logo

Language: en
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

A dark-mode SVG logo needs an explicit source of theme information. Page CSS can style the paths of inline SVG. An external SVG loaded through an image element has its own style context, but an internal `prefers-color-scheme` query can respond to the embedding element’s color scheme. A manual theme class and the user’s light/dark preference are separate inputs; decide which one should control the artwork.

Keep approved light- and dark-surface variants when they exist. Reversing every color can change an accent, lose an intentional outline or produce an unapproved logo. Theme support is a paint-and-integration decision after the artwork itself is correct.

## Separate user preference from a page theme

The CSS **`prefers-color-scheme` media feature** detects a light/dark preference communicated by the browser or operating system. [MDN describes those preference inputs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). A website’s own `data-theme="dark"` attribute is just application state until CSS or code gives it an effect.

That distinction explains a common disagreement: the browser preference remains light while a visitor selects a dark surface inside one website. A logo that follows only the preference may keep its light-surface colors on that dark page.

The **`color-scheme` property** is another control. It tells the browser which schemes an element supports; it does not automatically redesign every author-specified fill. [MDN’s property reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) distinguishes browser-managed rendering from the theme styling authors still supply.

| Intended owner                 | Integration choice                                                           | What to verify                                                  |
| ------------------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------- |
| Application’s manual theme     | Inline paths styled by the page’s theme selectors                            | Both logo paints change when the page theme changes             |
| Embedding surface’s scheme     | External SVG with its own media rules, plus an appropriate host color scheme | The same file chooses the intended paints on each host          |
| A supplied fixed brand variant | Select the correct approved asset in the application                         | The chosen file matches the surface and remains correctly named |

Do not add three independent theme mechanisms and hope they agree. Name the intended owner before debugging the visible color.

## Use page selectors for a manually themed inline logo

Inline SVG belongs to the page document, so targeted selectors can reach its paths. Our [inline SVG versus image comparison](https://perfectvector.com/blog/inline-svg-vs-img) explains that access boundary in more detail.

We authored an F-shaped mark with two paint roles: a main shape and a separate circular accent. These illustrative colors are original example choices, not a brand standard.

```css
.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }
```

Apply these rules to the intended inline artwork rather than every path on the site. A logo can contain several deliberate paints, masks or gradients. Our [SVG recoloring guide](https://perfectvector.com/blog/how-to-change-svg-color) covers inspecting what actually paints a shape before changing its styles.

Using `currentColor` is useful when a shape should share its element’s text color. It is not a requirement for a multicolor logo. Keep an accent separate when the design calls for a different paint, and check the whole mark on each intended surface.

## Let an external SVG own its internal media rules

An external image is a separate styling context. Setting `color: rebeccapurple` on its HTML image element does not reach inside and recolor arbitrary paths. Even a `currentColor` inside the SVG file does not automatically become the host page’s text color.

The file can instead contain its own theme rules. Here is the complete small adaptive SVG used in our original test:

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
  viewBox="0 0 140 105">
  <style>
    .ink { fill: #183c35; }
    .accent { fill: #c58868; }
    @media (prefers-color-scheme: dark) {
      .ink { fill: #f5f0e7; }
      .accent { fill: #ffc34d; }
    }
  </style>
  <path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
  <circle class="accent" cx="102" cy="73" r="17"/>
</svg>
```

For an embedded SVG image, its preference query can reflect the embedding element’s used color scheme. The [CSS Color Adjustment specification](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) describes that relationship. It is a scheme signal, not the host page’s ordinary CSS selectors crossing into the file.

In our fixture, one host explicitly sets `color-scheme: light`; another sets `color-scheme: dark`. Both load the same adaptive file. Their background and text colors are also authored deliberately. Setting the property alone would not supply those complete styles.

If your application owns the theme, coordinate its host scheme with that choice when using this approach. A dark background with a host still declaring light can send a different signal from the one you intended.

## Compare the three paths in an actual browser

Our original HTML fixture has two fixed-scheme hosts across the top. Below them, a button changes the page’s manual theme for an inline mark and a fixed-color external image. That external control file contains the same geometry but no dark-theme media rule.

The browser reported a light user preference. Clicking the manual-theme button changed the inline main fill from `rgb(24, 60, 53)` to `rgb(245, 240, 231)`, and its accent from `rgb(197, 136, 104)` to `rgb(255, 195, 77)`. The preference readout remained light. The page’s own selectors caused that paint change.

The two top images displayed the light and dark paints selected by their respective host schemes. The fixed external image kept its green and copper artwork even though its surrounding surface became dark and its HTML image element’s computed `color` was purple.

![Actual browser fixture comparing the same adaptive external SVG on light and dark hosts, a manually themed inline logo and a fixed external control that retains its original paints](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp)

*Actual original HTML/CSS test in the Codex in-app browser. The manual page theme is dark while the user-preference query reports light. Top-row host schemes are explicit test inputs; the operating-system preference was not changed.*

We inspected computed styles and the actual rendered result. All three external images loaded at their 140 × 105 natural dimensions and displayed at 280 × 210. The test establishes the behavior of these files in this browser session. It is not a cross-browser, email-client, PDF-export or operating-system-switching test.

## Test the final use, not only the standalone file

Open the original SVG separately to check its geometry, then inspect it through the actual page embedding. Check both theme states, the accent, transparent openings and the immediate background. A responsive logo may also change its composition at a narrow size; our [responsive lockup guide](https://perfectvector.com/blog/responsive-svg-logo-lockup) treats that separate decision.

An external SVG image has restrictions: [MDN notes that scripts are disabled and external resources are restricted](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Keep the required styles within the asset for the approach shown here, and test the real delivery context. A browser result does not promise the same behavior in an email renderer or design importer.

For a suitable logo available only as a PNG or JPEG, [PerfectVector’s logo vectorization workflow](https://perfectvector.com/vectorize-logo) can reconstruct paths for an SVG candidate. Compare the silhouette, lettering and small gaps with the source before preparing theme variants. Vectorization does not assign semantic paint roles, add your application’s theme logic or approve a reversed brand variant. Our test mark was authored directly as vector shapes.

## FAQ

**Will a dark page automatically recolor an external SVG logo?**
No. The image’s internal paint rules still matter. An adaptive external SVG can use its own preference query with the embedding element’s color scheme; a fixed-color SVG can keep its original paints.

**Does a manual dark-theme class change prefers-color-scheme?**
Not by itself. The class or data attribute is application state. In our test, the page’s manual theme changed while the browser’s user-preference query remained light.

**Should I invert all SVG logo colors for dark mode?**
Use approved variants when available. Inspect the main paint, accent, outlines and openings on the intended surface instead of assuming a blanket inversion preserves the design.

## Sources

1. [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — User preference inputs and embedded SVG behavior.
2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Scheme support and the author’s separate styling responsibility.
3. [CSS Color Adjustment: Effects of the used color scheme](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — The scheme signal supplied to embedded content.
4. [MDN: SVG as an image](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Image-context script and resource restrictions.

***

Need editable paths from a raster-only logo? [Create and inspect an SVG candidate](https://perfectvector.com/vectorize-logo), preserve the accepted master, then define the paint roles and test the actual themed page.

## Explore

- [Read the HTML article](https://perfectvector.com/blog/dark-mode-svg-logo)
- [Stop SVG Logo Layout Shifts by Reserving Space](https://perfectvector.com/blog/svg-logo-layout-reservation.md)
- [Fix the Gap Below an Inline SVG with CSS Layout](https://perfectvector.com/blog/inline-svg-baseline-gap.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)