Bug 294315 – prefers-color scheme is not applied to svg image when inserted through img or background css

• Component: CSS
• Status: NEW

[Karl Dubost]

https://wpt.fyi/results/css/mediaqueries/prefers-color-scheme-svg-image.html
https://wpt.live/css/mediaqueries/prefers-color-scheme-svg-image.html

The SVG called directy is changing color depending on the preferred color scheme when called directly. 

But once it is called through an img element or a CSS background property it fails.

The test is basically.

<div style="color-scheme: dark">
  <img src="resources/prefers-color-scheme.svg">
  <div class="background"></div>
</div>

with the SVG being 

<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <style>
    :root { color: blue }
    @media (prefers-color-scheme: dark) {
      :root { color: purple }
    }
  </style>
  <rect fill="currentColor" width="32" height="32"/>
</svg>


The SVG stays blue instead of being purple. 

This would have impact on anyone using SVG icon with dark theme.

[Radar WebKit Bug Importer]

<rdar://problem/153716346>