199134 2019-06-23 09:53:15 -0700 SVG images don't support prefers-color-scheme adjustments when embedded in a page 2026-04-01 01:26:54 -0700 1 1 1 Unclassified WebKit SVG Safari Technology Preview All macOS 10.14 NEW https://bugs.webkit.org/show_bug.cgi?id=283489 https://bugs.webkit.org/show_bug.cgi?id=309949 https://carpeaqua.com BrowserCompat, InRadar P2 Normal --- 1 justinw webkit-unassigned alexphilin aroselli dean_johnson dev eoconnor evan.exe fabioarnold90 fstorr gman hello hello+webkit hu.wang karlcow mambolouis mediaformat.ux me nimajneb0905 noahbeckman07 oliverwilliams345 papajuliettcharlie phil roy sabouhallawa samuel simon.fraser timothy webkit-bug-importer webkit zalan zcorpan zimmermann oldest_to_newest 1547180 0 372705 justinw 2019-06-23 09:53:15 -0700 Created attachment 372705 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. 1547268 1 webkit-bug-importer 2019-06-24 00:28:59 -0700 <rdar://problem/52044207> 1588110 2 me 2019-11-06 21:41:50 -0800 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. 1670507 3 mambolouis 2020-07-10 11:34:56 -0700 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. 1710067 4 papajuliettcharlie 2020-11-25 11:12:15 -0800 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? 1744097 5 alexphilin 2021-03-26 01:34:11 -0700 Any update on this issue? Please! 1777723 6 samuel 2021-07-17 15:48:35 -0700 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. 1853201 7 hu.wang 2022-03-21 08:35:43 -0700 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. 1882357 8 gman 2022-07-12 00:52:32 -0700 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 1882414 9 simon.fraser 2022-07-12 09:55:57 -0700 This is being discussed at https://github.com/w3c/csswg-drafts/issues/7213 1977037 10 roy 2023-09-12 02:37:28 -0700 In the meantime a solution has been provided at https://github.com/w3c/csswg-drafts/issues/7213 When will this make it into webkit? 2036733 11 zcorpan 2024-05-21 07:56:57 -0700 FYI, I ran into this in https://github.com/whatwg/whatwg.org/pull/444 but only using `color-scheme` and `currentColor`. 2099672 12 mediaformat.ux 2025-03-01 13:48:09 -0800 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 2118374 13 hello+webkit 2025-05-20 03:05:23 -0700 (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 :) 2132625 14 fstorr 2025-07-25 18:05:26 -0700 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 2132682 15 mediaformat.ux 2025-07-26 15:32:54 -0700 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. 2135853 16 karlcow 2025-08-12 00:19:23 -0700 Django, any open issues can be taken. 372705 2019-06-23 09:53:15 -0700 2019-06-23 09:53:15 -0700 This is the SVG I am using logo.svg image/svg+xml 901 justinw PHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMTAgMTEgMjAwIDMwIiB2 ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxp bms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNr ZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNo IC0tPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAg ICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsKICAgICAgICB0c3BhbiB7CiAgICAg ICAgICAgIGNvbG9yLXNjaGVtZTogbGlnaHQgZGFyazsKICAgICAgICAgICAgc3VwcG9ydGVkLWNv bG9yLXNjaGVtZXM6IGxpZ2h0IGRhcms7CiAgICAgICAgfQoKICAJCQkuY2FycGUgeyBmaWxsOiAj M0UzRTNFOyB9CiAgICAgICAgLmFxdWEgeyBmaWxsOiAjNEE5MEUyOyB9CgogICAgICAgIEBtZWRp YSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgICAuY2FycGUgeyBmaWxsOiAj RkZGRkZGOyB9CiAgICAgICAgfQogIAkJXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDx0ZXh0 IGlkPSJjYXJwZWFxdWEiIHN0cm9rZT0ibm9uZSIgZmlsbD0ibm9uZSIgZm9udC1mYW1pbHk9Ii1h cHBsZS1zeXN0ZW0tYm9keSwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBm b250LXdlaWdodD0ibm9ybWFsIj4KICAgICAgICA8dHNwYW4geD0iMTAiIHk9IjM0IiBjbGFzcz0i Y2FycGUiPmNhcnBlPC90c3Bhbj4KICAgICAgICA8dHNwYW4geD0iNjguODA0Njg3NSIgeT0iMzQi IGNsYXNzPSJhcXVhIj5hcXVhPC90c3Bhbj4KICAgIDwvdGV4dD4KPC9zdmc+Cg==