Issue with embedded SVG images in dark mode

问题

Embedded svg image inside tag doesn't work with media query prefers-color-scheme and CSS variables (Chrome and Safari, Firefox works).

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
    <style>
        :root{--color:#ffffff;}
        @media(prefers-color-scheme:light){:root{--color:#ffffff;}}
        @media(prefers-color-scheme:dark){:root{--color:#000000;}}
    </style>
    <path d="M18 15l-6-6-6 6"/>
</svg>

回答1:

Try this:

<?xml version="1.0" encoding="utf-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="48" height="48">
  <style>
    :root { --color: #00FF00; }
    @media (prefers-color-scheme: light) { :root { --color: #0000FF; } }
    @media (prefers-color-scheme: dark) { :root { --color: #FF0000; } }
    path {
      fill: none;
      stroke: var(--color);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  </style>
  <path d="M18 15l-6-6-6 6"/>
</svg>

来源：https://stackoverflow.com/questions/58493483/issue-with-embedded-svg-images-in-dark-mode