在暗模式下更改网站图标.md

在暗模式下更改网站图标

将一个白色的图像作为图标，在亮模式下，它几乎是看不见的！

事实证明，对于 PNG/JPG 位图图像，目前还没有这样做的方法，但我们可以使用 SVG 矢量图像技巧来实现这一点。

我们可以在 SVG 图像中嵌入 CSS。

如果图像足够简单，我们可以识别颜色并在暗模式下更改它，那么我们可以为这两种模式使用不同的颜色。

以下是一个网站图标的 SVG：

<svg
  width="37"
  height="45"
  viewBox="0 0 37 45"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <style>
    path {
      fill: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff;
      }
    }
  </style>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C25.849 0 29.0271 0.731675 31.8831 2.04389Z"
  />
</svg>

SVG 图像非常简单，它是一个半月形。

在亮模式下用 #ccc 填充路径颜色，在暗模式下用 #fff 填充路径颜色。

我们将其保存为 .svg 文件，然后在项目中使用它。