CSS kullanarak , prefers-color-scheme
medya ö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 picture
sarmak için etiket img
etiketi:
<picture>
<source
srcset="dark.png"
media="(prefers-color-scheme: dark)">
<img src="light.png">
</picture>
Koyu mod destekleniyorsa ve etkinleştirilmişse, dark.png
görüntü, img
etiketin kaynağı olarak kullanılacaktır .
Etiket çok iyi desteklenmektedir ve onu uygulamayan veya karanlık modu uygulamayan eski tarayıcılar light.png
gö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.png
resmi indirecek ve eğer açık mod ise, sadece indirecektir light.png
, böylece bant genişliği israfı olmaz.