Although this question is a bit old, I recently faced a similar issue and found a solution that worked for me. I’m sharing it here in case it helps others dealing with the same problem.

Scenario

I’m using an SVG file embedded in an HTML page via an <img> tag:

<img src="logo.svg" alt="Logo">

The SVG content includes shapes with black and white fills:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <path fill="#000" d="M0 500a500 500 0 1 0 1000 0A500 500 0 1 0 0 500" />
  <path fill="#fff" d="M145 500a355 355 0 1 0 710 0 355 355 0 1 0-710 0" />
  <path fill="#000" d="M250 500a250 250 0 1 0 500 0 250 250 0 1 0-500 0" />
  <path fill="#fff" d="M750 147.5h105v705H750z" />
</svg>

Normal View:

Problem

When dark mode is enabled in the browser (e.g., Opera desktop or Opera mobile with "Force dark page" enabled), the SVG’s transparent background adopts the dark theme, causing both black and white shapes to appear incorrectly (e.g., all shapes rendered white due to the dark mode).

Solution

To ensure the SVG preserves its original colors even in dark mode, I added a CSS rule to the <img> element:

img {
  color-scheme: dark;
}

Alternatively, if you want to target the SVG specifically, you can wrap it in a container and apply the styles:

<div class="svg-container">
  <img src="logo.svg" alt="Logo">
</div>

.svg-container img  {
  color-scheme: dark;
}

Result:

This approach worked for me, ensuring the SVG’s appearance remains consistent regardless of the system’s dark mode settings. Hopefully, this helps others facing similar issues!