深色模式下嵌入 SVG 图像的问题

Question

标签内嵌入的 svg 图像不适用于媒体查询首选颜色方案和 CSS 变量（Chrome 和 Safari、Firefox 可以）。

<?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>

Answer 1

尝试这个：

<?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>