Karanlık modda bir HTML resim URL'si nasıl değiştirilir

CSS kullanarak , prefers-color-schememedya özelliğini kullanarak sistem karanlık modda ise değişiklikleri uygulamak oldukça kolaydır ve pratiktir.

Bazen bu sorunla karşılaşıyoruz - CSS kuralı yerine HTML'de tanımlanan bir resmi nasıl değiştirebiliriz?

Herhangi bir CSS veya JavaScript olmadan bunu yapmanın basit bir HTML yolu olduğu ortaya çıktı.

Biz kullanabilirsiniz picturesarmak için etiket imgetiketi:

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

Koyu mod destekleniyorsa ve etkinleştirilmişse, dark.pnggörüntü, imgetiketin kaynağı olarak kullanılacaktır .

Etiket çok iyi desteklenmektedir ve onu uygulamayan veya karanlık modu uygulamayan eski tarayıcılar light.pnggörüntüyü görüntülemeye geri dönecektir .

Tarayıcının her durumda 2 resim indirmediğini unutmamak önemlidir: eğer karanlık mod ise, bu örnekte sadece dark.pngresmi indirecek ve eğer açık mod ise, sadece indirecektir light.png, böylece bant genişliği israfı olmaz.