在黑暗模式下更改圖標

如何在黑暗或明亮模式下顯示其他圖標

我將Mac設置為在暗和亮模式之間自動切換。

我開始建立一個新的網站,當時我意識到我把白色圖片當成了收藏夾圖標,而在光線模式下,它幾乎是不可見的!

因此,我開始研究在黑暗模式下添加圖標圖標和在明亮模式下添加圖標圖標的可能方法。

事實證明,對於PNG / JPG位圖圖像,還沒有一種方法,但是我們可以使用SVG矢量圖像的技巧。

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

如果圖像足夠簡單,我們可以識別顏色並在暗模式下進行更改,則這兩種模式可以使用不同的顏色。

我用這個技巧https://prototyped.dev(您可以檢查網站圖標的變化)。

這是我用作網站圖標的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文件,然後將其用作蓋茨比的Favicon

免費下載我的HTML手冊


更多HTML教程: