Bug 199134 - SVG images don't support prefers-color-scheme adjustments when embedded in a page
Summary: SVG images don't support prefers-color-scheme adjustments when embedded in a ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: All macOS 10.14
: P2 Normal
Assignee: Nobody
URL: https://carpeaqua.com
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2019-06-23 09:53 PDT by Justin Williams
Modified: 2023-10-06 15:28 PDT (History)
20 users (show)

See Also:

This is the SVG I am using (901 bytes, image/svg+xml)
2019-06-23 09:53 PDT, Justin Williams
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Justin Williams 2019-06-23 09:53:15 PDT
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.
Comment 1 Radar WebKit Bug Importer 2019-06-24 00:28:59 PDT
Comment 2 Jayden Seric 2019-11-06 21:41:50 PST
Here is a CodeSandbox demonstrating the issue, along with a table of observed behaviour across browsers:


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.
Comment 3 Louis Hoebregts 2020-07-10 11:34:56 PDT
This issue is open since a year now and there is no update.
You can see the bug is still happening here:
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.
Comment 4 Peter 2020-11-25 11:12:15 PST
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?
Comment 5 Alexey Filin 2021-03-26 01:34:11 PDT
Any update on this issue? Please!
Comment 6 Samuel Williams 2021-07-17 15:48:35 PDT
I am also having this problem. You can trivially compare the following page in Safari and Chrome/Firefox, etc.


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.
Comment 7 Hu 2022-03-21 08:35:43 PDT
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.
Comment 8 Gregg Tavares 2022-07-12 00:52:32 PDT
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,


This in Chrome


And this in Safari

Comment 9 Simon Fraser (smfr) 2022-07-12 09:55:57 PDT
This is being discussed at https://github.com/w3c/csswg-drafts/issues/7213
Comment 10 Roy Teeuwen 2023-09-12 02:37:28 PDT
In the meantime a solution has been provided at https://github.com/w3c/csswg-drafts/issues/7213
When will this make it into webkit?