firefox-devtools / devtools-core

:rocket: Packages for Firefox DevTools

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dark/Light Mode emulation doesn't affect SVGs in IMG tags

CamJN opened this issue · comments

Problem:

Use devtools simulate dark/light mode buttons to switch dark/light mode:
html is affected, svg is not.

Use actual OS dark/light mode switch to switch dark/light mode:
both html and svg affected.

Ideal situation:
both html and svg affected by devtools simulate dark/light mode buttons.

Test files:

html file contents:

<style>
@media(prefers-color-scheme:dark){body {background:red;}}
@media(prefers-color-scheme:light){body {background:blue;}}
</style>
<img src="path/to/an.svg" />

svg file contents:

<svg width="41" height="32" viewBox="0 0 41 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media(prefers-color-scheme:dark){svg {background:black;}}
@media(prefers-color-scheme:light){svg {background:white;}}
</style>
</svg>

Hello @CamJN , I was able to replicate the issue, and I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1703451 for taking care of it.
This repo is only for some libraries that are used by DevTools, but it's better if bugs can be filed on https://bugzilla.mozilla.org :)
I'm going to close this one, so let's continue the discussion on Bugzilla :)