Bug 199134 – SVG images don't support prefers-color-scheme adjustments when embedded in a page

• Component: SVG
• Status: NEW

[Justin Williams]

Created attachment 372705 [details]
This is the SVG I am using

Desktop Safari version: STP Release 85 (Safari 13.0, WebKit 14608.1.28.1)
Mobile Safari: iOS 13 Beta 2

I have an SVG i am trying to update to adopt dark mode using embedded CSS and a @media query. If I open it in the web inspector and toggle dark vs light mode in the Elements tab, it updates the colors appropriately. When embedded in a web page, however, the CSS values are not respected. On the latest version of Firefox it works as expected (or maybe they have a bug and I'm doing it wrong?) 


You can see it live on https://carpeaqua.com.  I've also attached the SVG here.

Happy to provide more info as needed.

[Radar WebKit Bug Importer]

<rdar://problem/52044207>

[Jayden Seric]

Here is a CodeSandbox demonstrating the issue, along with a table of observed behaviour across browsers:

https://codesandbox.io/s/svg-prefers-color-scheme-media-query-test-7jzlp

Newer Chromium based browsers don’t have this issue (Chrome and Edge v80). Firefox v70.0.1 is ok, although the page must be refreshed after changing the OS color scheme.

It would be extremely useful to be able to use the @media (prefers-color-scheme: dark) media query within SVG files, so that graphics such as logos can adapt themselves for light or dark mode.

[Louis Hoebregts]

This issue is open since a year now and there is no update.
You can see the bug is still happening here:
https://codepen.io/Mamboleoo/pen/XWXYNNL
When opening the SVG file, you get a different color scheme than checking the CodePen page.

As mention before, the media-query is really helpful to handle light/dark icons on our websites.

[Peter]

Same issue for me. As mention before, the media-query is really helpful to handle light/dark icons on our websites.

Any update on this issue?

[Alexey Filin]

Any update on this issue? Please!

[Samuel Williams]

I am also having this problem. You can trivially compare the following page in Safari and Chrome/Firefox, etc.

https://github.com/socketry/async

On Safari, the logo currently has black text and a black border. On Chrome, it has white text and a light coloured border.

It actually works if you use the `<object>` tag to embed it. But this is cumbersome to use in practice, and impossible to change for GitHub's rendering of the markdown -> HTML.

[Hu]

Similar issue for me. In my case, I embed the SVGs as data URLs in the CSS. Works perfectly in Firefox/Chrome just not in Safari.

[Gregg Tavares]

I'd be nice if this was fixed. For example the github repo of the WebGPU spec which Apple is participating in looks like this in Firefox,

https://imgur.com/ZpPFGBN

This in Chrome

https://imgur.com/wEUjG71

And this in Safari

https://imgur.com/9s51nNg

[Simon Fraser (smfr)]

This is being discussed at https://github.com/w3c/csswg-drafts/issues/7213

[Roy Teeuwen]

In the meantime a solution has been provided at https://github.com/w3c/csswg-drafts/issues/7213
When will this make it into webkit?

[Simon Pieters (:zcorpan)]

FYI, I ran into this in https://github.com/whatwg/whatwg.org/pull/444 but only using `color-scheme` and `currentColor`.

[Django Doucet]

Still so broken. What is especially cursed is that Safari has no problems detecting `(prefers-color-scheme: light)`, so even having a dark-mode default is not possible
Example test forked from Jayden Seric: https://codesandbox.io/p/devbox/svg-prefers-color-scheme-media-query-test-forked-zmdqft

whatwg proposal was merged, so this should be shipped
https://github.com/whatwg/whatwg.org/pull/444

(Django Doucet, that PR is not a whatwg proposal to make this work. It's just a wahtwg website using this feature that doesn't work in WebKit)

I would also like to see this fixed. It's not just a nice to have, it is an accessibility issue because not respecting usually `prefers-color-scheme` significantly reduces their contrast when using dark mode.

I noticed this problem in this markdown file (https://github.com/tc39/agendas/blob/main/2025/05.md), where the duration after "Total duration of scheduled discussions" is actually an image. That image is meant to have black text in light mode, and white text in dark mode. I've got reports from TC39 delegates using dark mode and webkit that the number was unreadable (black text on dark background), and as a workaround I had to add a white outline to the black text in the default (light mode) image. It looks terrible, but at least it makes it somewhat readable (even though with its own accessibility issues): https://github.com/user-attachments/assets/d8365f12-1d97-4af5-8660-1fc4ef6e21ff.

I'm writing this comment even though other people already said that this bug still happens because:
- to show that multiple people are affected, and it's not just a niche request
- because I find it funny that  both WHATWG and TC39 are affected :)

Another vote for getting this bug fixed. Here's another test case, which shows the bug exists for the img tag but not the object tag: https://cdpn.io/pen/debug/GgpqGVb/26d792ee03de738f73118876f904ba5a

[Django Doucet]

Accepted by CSSWG Resolution (circa April 2022): 
https://github.com/w3c/csswg-drafts/issues/7213

“Embedded SVGs and iframes can now use prefers-color-scheme media query to add styles that inherit (depend on) the color-scheme of the embedding element.”
https://github.com/mdn/content/pull/20886

If someone with permission could add labels, this would be “needs patch” or equivalent.