在深色模式下更改網頁圖示

如何在深色或亮色模式下顯示不同的網頁圖示

我在 Mac 上設置了自動切換深色和亮色模式的功能。

當我開始建立一個新的網站時，有一段時間我意識到我把一個白色圖片設置為網頁圖示，而在亮色模式下它幾乎是看不見的！

所以我開始探索在深色模式中添加一個網頁圖示以及在亮色模式中添加不同的圖示的可能方法。

結果發現（目前）無法對 PNG/JPG 位圖圖片進行這樣的操作，但我們可以使用 SVG 向量圖像的技巧來實現。

我們可以在 SVG 圖像中嵌入 CSS。

如果圖像足夠簡單以至於我們可以識別一個顏色並在深色模式下更改它，那麼我們可以為這 2 種模式設置不同的顏色。

這是我用作網頁圖示的 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 中使用它作為網頁圖示。