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.