偏好颜色方案媒体查询问题

Question

我正在使用 svg favicon

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

我想在深色模式浏览器中切换图标，这样我在 svg 文件中的代码看起来像

circle {
      fill: red;
      stroke: yellow;
    }
@media (prefers-color-scheme: dark) {
  circle  {fill: yellow;
        stroke: red; }
  }

但是当我将浏览器更改为深色模式时，图标不会切换。

有人可以帮我吗？

Chrome版本：版本89.0.4389.90 火狐版本：87.0（64位） Ubuntu：16.04

Answer 1

根据配色方案动态更改图标是可行的，但在方案更改后需要重新加载。这是一个完整的例子：

<!-- icon.svg -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47" />
</svg>

<!-- index.html -->
<link rel="icon" href="/icon.svg" />

您可以在 Glitch 上看到此部署，并在我的博客文章中阅读有关它的更多详细信息。

Answer 2

也许这对某人有帮助，请记住操作系统主题是用于首选颜色方案媒体查询的主题。例如，我正在使用 chrome devtools 模拟媒体查询，但它没有改变，因为我在 Windows 上始终使用浅色主题。

https://developer.chrome.com/docs/devtools/rendering/emulate-css