Why does `color-scheme: dark` cause <object>s to have white backgrounds in Chrome?

user_229792 0
Viewed 102

I have a site which uses <object> to render external SVGs, many of which have transparent backgrounds. I added the CSS property color-scheme: dark, indicating that it "can be rendered using the operating system dark color scheme". However, in Chrome/Blink, this results in the <object> elements having white backgrounds! This is a minimal demo:

:root {
  background-color: blue;
  
  /*
    In Chrome/Edge, the following makes the <object> have a white background!
    In Firefox/Safari, it stays transparent.
  */
  color-scheme: dark;
}
body {
  margin: 0;
}
<object
  type="image/svg+xml"
  data="data:image/svg+xml,%3Csvg version='1.1' width='300' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='150' cy='100' r='80' fill='green' /%3E%3C/svg%3E%0A">
  SVG not supported
</object>

What's going on here? Is this a bug in Chromium? Or is there something about <object>, SVG, or color-scheme that I have misunderstood?

google-chrome svg css html
1 Answers

I ran into this too, and this post was about the only thing I could find regarding this specific issue. Posting a semi-fix to help others. I was able to find a work-around IF your background color is solid (not a gradient or image).

I added a background-color style directly to the SVG — in my case via the tag, citing the SVG itself via an ID tag. Said color matched the background-color that my SVG object tag is contained in. This style was scoped via the dark-mode media query. Incidentally, I had to cache-bust the <object> tag's data src. Adding a query string did that. EG: ?v.22.4.6

Here's an example of how I was able to get around the bug:

SVG in Object in Header (it's a logo, note the cache busting query is optional)

<header style="background-color:#00053E">
  <object type="image/svg+xml" data="../the/link/to-your.svg?v22.6.3">
      ...

The SVG the object embeds:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="SVG-ID-HERE" viewBox="0 0 291 31"  preserveAspectRatio="xMidYMid meet">
    <style type="text/css">
        @media (prefers-color-scheme: dark)
        {
            #SVG-ID-HERE{ background-color: #00053E }
        }
    </style>
...
user_192712960
Related