如何在暗模式下更改HTML圖片URL

使用CSS很容易根據系統是否處於暗模式來進行更改，只需使用prefers-color-scheme媒體特性。

如果您想了解更多關於暗模式的資訊，請查看我在暗模式的博客文章。

今天我遇到了一個問題 - 如何更改HTML中定義的圖片，而不是CSS規則？

事實證明，有一種純HTML的方法可以做到這一點，而不需要任何CSS或JavaScript。

我們可以使用picture標籤來包裝img標籤：

<picture>
 <source 
 srcset="dark.png" 
 media="(prefers-color-scheme: dark)">
 <img src="light.png">
</picture>

如果支援且啟用了暗模式，則將使用dark.png圖片作為img標籤的源。

這個標籤的支援非常好，不支援此標籤或不支援暗模式的舊瀏覽器將回退顯示light.png圖片。

值得注意的是，在任何情況下，瀏覽器不會下載兩張圖片：如果是暗模式，就只會下載dark.png圖片；如果是亮模式，則只會下載light.png圖片，因此不會浪費帶寬。

tags: [“html”, “dark mode”, “image URL”, “prefers-color-scheme”]