如何在黑暗或光明模式下显示不同的图标

如何在黑暗或光明模式下显示不同的图标

我把我的Mac设置成在黑暗和光明模式之间自动切换。

我开始建立一个新的网站，在某一时刻，我发现我把一个白色的图片作为favicon，而在浅色模式下，它几乎是看不见的。

于是我开始研究如何在深色模式下添加一个图标，在浅色模式下添加一个不同的图标。

结果发现，对于PNG/JPG位图图像来说，还没有办法做到这一点，但我们可以使用SVG矢量图像的技巧来做到这一点。

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

如果图像足够简单，我们可以识别一种颜色并在黑暗模式下改变它，我们就可以在2种模式下有不同的颜色。

这是我作为favicon使用的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图像非常简单，它是我在Figma中设计的一个半月，然后导出为SVG。

然后我在浅色模式下用#ccc ，在深色模式下用#fff ，把路径的颜色填满。

我把它保存为.svg 文件，然后把它作为Gatsby中的图标。