283489 2024-11-21 07:42:21 -0800 Dark mode does not work in SVGImages 2026-04-01 01:25:57 -0700 1 1 1 Unclassified WebKit New Bugs WebKit Nightly Build Mac (Apple Silicon) macOS 15 REOPENED https://bugs.webkit.org/show_bug.cgi?id=199134 InRadar P2 Normal --- 1 oliverwilliams345 sabouhallawa dev karlcow nileshprajapati sabouhallawa simon.fraser webkit-bug-importer oldest_to_newest 2076698 0 oliverwilliams345 2024-11-21 07:42:21 -0800 If you have an SVG file with the following markup: <svg id="cloud" style="color-scheme: light dark;" xmlns="http://www.w3.org/2000/svg" fill="light-dark(red, blue)" viewBox="0 0 16 16"> <path d="M4.158 12.025a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m6 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m-3.5 1.5a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m6 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 1 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m.747-8.498a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 11H13a3 3 0 0 0 .405-5.973"/> </svg> In Firefox and Chrome, it will have a blue fill in dark mode and a red fill in light mode, even if the SVG is referenced using the HTML <img> tag: <img src="cloud.svg"> In Safari, the fill of the SVG is always red regardless of the users chosen color scheme. 2076699 1 oliverwilliams345 2024-11-21 08:06:29 -0800 A similar issue has also been raised previously: https://bugs.webkit.org/show_bug.cgi?id=199134 2077405 2 oliverwilliams345 2024-11-24 09:36:01 -0800 This issue only affects Safari and means that it is difficult for me to implement an icon system on my website. Hopefully this can also be fixed of the sake of light/dark favicons once Safari adds support for SVG favicons. I also wanted to make clear that this issue effects both SVGs used as <img> and also SVG referenced using <use>. 2078064 3 webkit-bug-importer 2024-11-28 07:43:13 -0800 <rdar://problem/140661763> 2078068 4 nileshprajapati 2024-11-28 08:26:50 -0800 WebKit position: SVG favicons https://github.com/WebKit/standards-positions/issues/367 2103307 5 474571 sabouhallawa 2025-03-14 09:45:02 -0700 Created attachment 474571 test case 2105498 6 sabouhallawa 2025-03-23 23:37:52 -0700 Pull request: https://github.com/WebKit/WebKit/pull/42918 2105682 7 taher_ali 2025-03-24 14:38:51 -0700 Pull request: https://github.com/WebKit/WebKit/pull/42955 2106761 8 oliverwilliams345 2025-03-28 02:40:34 -0700 Related to this: Canvas and CanvasText are not currently effected by the users chosen system preference, even when style="color-scheme: light dark" is included on the SVG. 2163273 9 ews-feeder 2025-12-04 09:19:12 -0800 Committed 303920@main (702c47ccd924): <https://commits.webkit.org/303920@main> Reviewed commits have been landed. Closing PR #42918 and removing active labels. 2181732 10 oliverwilliams345 2026-02-14 07:28:30 -0800 I do not understand why this issue has been marked as resolved fixed. From my testing in Safari Technology Preview 237 this issue is not fixed. 2181743 11 simon.fraser 2026-02-14 10:17:49 -0800 In the test case, "inline SVG" is fixed, but" <img> src" and "CSS background-image" are not. Does that match what you're seeing? 2181745 12 oliverwilliams345 2026-02-14 10:28:00 -0800 Yes that matches what I’m seeing. 474571 2025-03-14 09:45:02 -0700 2025-03-14 09:45:02 -0700 test case test-svg-light-dark.html text/html 2528 sabouhallawa PHN0eWxlPgogICAgc3ZnLCBpbWcsIGRpdiB7CiAgICAgICAgd2lkdGg6IDIwMHB4OwogICAgICAg IGhlaWdodDogMjAwcHg7CiAgICB9ICAKICAgIGRpdiB7CiAgICAgICAgZGlzcGxheTogaW5saW5l LWJsb2NrOwogICAgICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiZGF0YTppbWFnZS9zdmcreG1s O2NoYXJzZXQ9dXRmOCwgXAogICAgICAgICAgICAlM0Nzdmcgc3R5bGU9J2NvbG9yLXNjaGVtZTog bGlnaHQgZGFyazsnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgZmlsbD0nbGln aHQtZGFyayhyZWQsIGJsdWUpJyB2aWV3Qm94PScwIDAgMTYgMTYnJTNFIFwKICAgICAgICAgICAg ICAgICAgICAlM0NwYXRoIGQ9J000LjE1OCAxMi4wMjVhLjUuNSAwIDAgMSAuMzE2LjYzM2wtLjUg MS41YS41LjUgMCAwIDEtLjk0OC0uMzE2bC41LTEuNWEuNS41IDAgMCAxIC42MzItLjMxN202IDBh LjUuNSAwIDAgMSAuMzE2LjYzM2wtLjUgMS41YS41LjUgMCAwIDEtLjk0OC0uMzE2bC41LTEuNWEu NS41IDAgMCAxIC42MzItLjMxN20tMy41IDEuNWEuNS41IDAgMCAxIC4zMTYuNjMzbC0uNSAxLjVh LjUuNSAwIDAgMS0uOTQ4LS4zMTZsLjUtMS41YS41LjUgMCAwIDEgLjYzMi0uMzE3bTYgMGEuNS41 IDAgMCAxIC4zMTYuNjMzbC0uNSAxLjVhLjUuNSAwIDEgMS0uOTQ4LS4zMTZsLjUtMS41YS41LjUg MCAwIDEgLjYzMi0uMzE3bS43NDctOC40OThhNS4wMDEgNS4wMDEgMCAwIDAtOS40OTktMS4wMDRB My41IDMuNSAwIDEgMCAzLjUgMTFIMTNhMyAzIDAgMCAwIC40MDUtNS45NzMnLyUzRSBcCiAgICAg ICAgICAgICUzQy9zdmclM0UiKTsKICAgIH0KPC9zdHlsZT4KPGJvZHk+CiAgICA8dGFibGU+CiAg ICAgICAgPHRyPgogICAgICAgICAgICA8dGQ+CiAgICAgICAgICAgICAgICA8c3ZnIGlkPSJjbG91 ZCIgc3R5bGU9ImNvbG9yLXNjaGVtZTogbGlnaHQgZGFyazsiIHhtbG5zPSJodHRwOi8vd3d3Lncz Lm9yZy8yMDAwL3N2ZyIgZmlsbD0ibGlnaHQtZGFyayhyZWQsIGJsdWUpIiB2aWV3Qm94PSIwIDAg MTYgMTYiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjE1OCAxMi4wMjVhLjUuNSAw IDAgMSAuMzE2LjYzM2wtLjUgMS41YS41LjUgMCAwIDEtLjk0OC0uMzE2bC41LTEuNWEuNS41IDAg MCAxIC42MzItLjMxN202IDBhLjUuNSAwIDAgMSAuMzE2LjYzM2wtLjUgMS41YS41LjUgMCAwIDEt Ljk0OC0uMzE2bC41LTEuNWEuNS41IDAgMCAxIC42MzItLjMxN20tMy41IDEuNWEuNS41IDAgMCAx IC4zMTYuNjMzbC0uNSAxLjVhLjUuNSAwIDAgMS0uOTQ4LS4zMTZsLjUtMS41YS41LjUgMCAwIDEg LjYzMi0uMzE3bTYgMGEuNS41IDAgMCAxIC4zMTYuNjMzbC0uNSAxLjVhLjUuNSAwIDEgMS0uOTQ4 LS4zMTZsLjUtMS41YS41LjUgMCAwIDEgLjYzMi0uMzE3bS43NDctOC40OThhNS4wMDEgNS4wMDEg MCAwIDAtOS40OTktMS4wMDRBMy41IDMuNSAwIDEgMCAzLjUgMTFIMTNhMyAzIDAgMCAwIC40MDUt NS45NzMiLz4KICAgICAgICAgICAgICAgIDwvc3ZnPgogICAgICAgICAgICA8L3RkPgogICAgICAg ICAgICA8dGQ+CiAgICAgICAgICAgICAgICA8aW1nIHNyYz0nZGF0YTppbWFnZS9zdmcreG1sO3V0 ZjgsCiAgICAgICAgICAgICAgICAgICAgPHN2ZyBpZD0iY2xvdWQiIHN0eWxlPSJjb2xvci1zY2hl bWU6IGxpZ2h0IGRhcms7IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9 ImxpZ2h0LWRhcmsocmVkLCBibHVlKSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgICAgICAgICAg ICAgICAgICAgICAgPHBhdGggZD0iTTQuMTU4IDEyLjAyNWEuNS41IDAgMCAxIC4zMTYuNjMzbC0u NSAxLjVhLjUuNSAwIDAgMS0uOTQ4LS4zMTZsLjUtMS41YS41LjUgMCAwIDEgLjYzMi0uMzE3bTYg MGEuNS41IDAgMCAxIC4zMTYuNjMzbC0uNSAxLjVhLjUuNSAwIDAgMS0uOTQ4LS4zMTZsLjUtMS41 YS41LjUgMCAwIDEgLjYzMi0uMzE3bS0zLjUgMS41YS41LjUgMCAwIDEgLjMxNi42MzNsLS41IDEu NWEuNS41IDAgMCAxLS45NDgtLjMxNmwuNS0xLjVhLjUuNSAwIDAgMSAuNjMyLS4zMTdtNiAwYS41 LjUgMCAwIDEgLjMxNi42MzNsLS41IDEuNWEuNS41IDAgMSAxLS45NDgtLjMxNmwuNS0xLjVhLjUu NSAwIDAgMSAuNjMyLS4zMTdtLjc0Ny04LjQ5OGE1LjAwMSA1LjAwMSAwIDAgMC05LjQ5OS0xLjAw NEEzLjUgMy41IDAgMSAwIDMuNSAxMUgxM2EzIDMgMCAwIDAgLjQwNS01Ljk3MyIvPgogICAgICAg ICAgICAgICAgPC9zdmc+Jz4KICAgICAgICAgICAgPC90ZD4KICAgICAgICAgICAgPHRkPgogICAg ICAgICAgICAgICAgPGRpdj48L2Rpdj4KICAgICAgICAgICAgPC90ZD4KICAgICAgICA8L3RyPgog ICAgICAgIDx0cj4KICAgICAgICAgICAgPHRkPjxoMj4gaW5saW5lIFNWRyA8L2gyPjwvdGQ+CiAg ICAgICAgICAgIDx0ZD48aDI+ICZsdDtpbWcmZ3Q7IHNyYyA8L2gyPjwvdGQ+CiAgICAgICAgICAg IDx0ZD48aDI+IENTUyBiYWNrZ3JvdW5kLWltYWdlIDwvaDI+PC90ZD4KICAgICAgICA8L3RyPgog ICAgPC90YWJsZT4KPC9ib2R5Pgo=