DTeam 技术日志

Doer、Delivery、Dream

技巧:根据主题模式(dark/light)切换favicon

胡伟红 Posted at — Mar 31, 2021 阅读

项目开发时,有可能会根据主题模式使用不同的 favicon,这里介绍一个小技巧:使用 SVG 来实现。

prefers-color-scheme

CSS 中可通过 prefers-color-scheme 查询使用的主题模式。

@media (prefers-color-scheme: dark) {
  ....
}

更改 SVG 内容

在 SVG 中使用 CSS 代码来改变内容:

<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    #Group {
      fill: black;
    }
    @media (prefers-color-scheme: dark) {
      #Group {
          fill: #FFFFFF;
      }
    }
  </style>
  <title>ico</title>
  <g id="logo-autograph-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group" transform="translate(-0.000000, -0.000000)" fill="#FFFFFF">
        ...
    </g>
  </g>
</svg>

在 Head 中使用 SVG 即可:

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

友情链接


相关文章