使用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圖片,因此不會浪費帶寬。