如何在暗模式下更改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圖片，因此不會浪費帶寬。