HTML'de Görseli Koyu/Açık Moda Göre Ayarlamak

CSS'de prefers-color-scheme özelliği ile koyu/açık modu tespit edebiliyoruz. HTML'de <picture> ve <source> etiketleri ile buna göre kontrol ederek koyu modda koyu görseli açık modda açık görseli kolayca gösterebiliriz.

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

Editörde Görüntüle

Eğer koyu mod destekleniyorsa ve aktifse o zaman source içindeki koyu.png dosyası görünecektir. Diğer türlü acik.png görseli görünmeye devam edecek.

Bunu daha çok temalarınızda koyu/açık mod yaptığınızda logonuz için kullanabilirsiniz. Koyu modda açık reknli bir logo, açık modda koyu renkli bir logoya dönüştürmek gibi.