是否可以对支持主题颜色的浏览器使用其他图标？

Question

有没有办法通过meta标签或manifest.json为支持主题颜色的浏览器设置不同的图标？我有一个黑色的主题栏，但在桌面浏览器上却使用了一个黑色的图标。我想为移动浏览器提供一个备用的白色图标，但我不想假设移动浏览器===支持主题颜色，因为情况并非总是如此。

桌面收藏夹示例：

移动收藏夹示例：

Answer 1

浏览器的主题可通过prefers-color-scheme媒体查询访问。不幸的是，由于收藏夹图标不是页面元素，因此您不能使用 CSS 文件中的媒体查询来在两个图像之间切换。

解决办法是结合prefers-color-schemeSVG，可以嵌入CSS。声明一个 SVG 图标：

<link rel="icon" href="my_icon.svg">

并在 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>

来源在tomoyac.com

SVG 图标仍然是一项高级功能。Firefox和Chrome已经支持它，但其他浏览器尚不支持它。