NEW316640
SVG should be affected by the color-scheme CSS property 
https://bugs.webkit.org/show_bug.cgi?id=316640
Summary SVG should be affected by the color-scheme CSS property
Oliver Williams
Reported 2026-06-09 01:01:40 PDT
Safari Technology Preview 245 has fixed SVG to respect the users chosen system color scheme when using prefers-color-scheme media query inside the SVG code when the SVG is used as a HTML `<img>` It should be possible to override the the system preference via the color-scheme CSS property. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme#inherited_color_scheme_in_embedded_elements This should be the case both for SVG that use the light-dark() CSS function, and for SVG that use the prefers-color-scheme media query. So the two following icons should be a different color, regardless of the users system setting: <img style="color-scheme: light;" src="/cloud.svg"> <img style="color-scheme: dark;" src="/cloud.svg"> The color-scheme CSS property works correctly to override the system color scheme in Firefox and Chrome/Edge, but not in Safari.
Attachments
An SVG using a prefers-color-scheme media query CSS function (712 bytes, image/svg+xml)
2026-06-09 12:02 PDT, Oliver Williams 		no flags
Details
An SVG using the light-dark() CSS function (712 bytes, image/svg+xml)
2026-06-09 12:03 PDT, Oliver Williams 		no flags
Details
An SVG using the light-dark() CSS function (583 bytes, image/svg+xml)
2026-06-09 12:06 PDT, Oliver Williams 		no flags
Details
rendering in safari, firefox (316.64 KB, image/png)
2026-06-10 02:34 PDT, Karl Dubost 		no flags
Details
Screenshot of Firefox (71.73 KB, image/png)
2026-06-10 03:01 PDT, Oliver Williams 		no flags
Details
Screenshot of Google Chrome (62.32 KB, image/png)
2026-06-10 03:02 PDT, Oliver Williams 		no flags
Details
Screenshot of Safari Technology Preview (50.39 KB, image/png)
2026-06-10 03:02 PDT, Oliver Williams 		no flags
Details
rendering in safari, firefox, chrome (85.03 KB, image/png)
2026-06-10 03:12 PDT, Karl Dubost 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Oliver Williams
Comment 1 2026-06-09 12:02:07 PDT
Created attachment 480029 [details] An SVG using a prefers-color-scheme media query CSS function
Oliver Williams
Comment 2 2026-06-09 12:03:44 PDT
Created attachment 480030 [details] An SVG using the light-dark() CSS function
Oliver Williams
Comment 3 2026-06-09 12:06:17 PDT
Created attachment 480031 [details] An SVG using the light-dark() CSS function
Karl Dubost
Comment 4 2026-06-09 15:09:32 PDT
Thanks a lot for the testcases this is useful. It looks like at first sight a duplicate of Bug 199134
Karl Dubost
Comment 5 2026-06-10 02:34:17 PDT
Created attachment 480039 [details] rendering in safari, firefox For this test: An SVG using a prefers-color-scheme media query CSS function * Safari STP 245 * Firefox Nightly 153 when activating dark mode simulation in the devtools. I get a yellow cloud on a black background.
Oliver Williams
Comment 6 2026-06-10 03:01:40 PDT
Created attachment 480040 [details] Screenshot of Firefox
Oliver Williams
Comment 7 2026-06-10 03:02:03 PDT
Created attachment 480041 [details] Screenshot of Google Chrome
Oliver Williams
Comment 8 2026-06-10 03:02:26 PDT
Created attachment 480042 [details] Screenshot of Safari Technology Preview
Radar WebKit Bug Importer
Comment 10 2026-06-16 01:02:13 PDT
<rdar://problem/179795652>
Oliver Williams
Comment 11 2026-07-16 07:18:41 PDT
Recent CSSWG resolutions and spec changes mean that the color-scheme should effect ALL uses of the prefers-color-scheme media query, not just SVG and iframe.
Note You need to log in before you can comment on or make changes to this bug.