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