html - 是否可以为支持主题颜色的浏览器使用不同的图标？

Question

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

桌面图标示例:

移动网站图标示例:

Answer 1

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

解决方案是将 prefers-color-scheme 与 SVG 相结合，SVG 可以嵌入 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 图标仍然是一项高级功能。已经支持by Firefox和 by Chrome , 但其他浏览器 do not support it yet .