8

技巧：根据主题模式（dark/light）切换favicon

 3 years ago
source link: https://blog.dteam.top/posts/2021-03/switch-favicon-according-theme-mode.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

项目开发时，有可能会根据主题模式使用不同的 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" />

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK