HTML ile görsellerde dark mode seçeneği

HTML’de görselleri/resimleri kullanıcının seçtiği renk şemasına(Color-scheme) göre değiştirebilmeniz mümkün. CSS ile zaten kullanılabilen bu özellik HTML içerisinde de çalışabilir.

Kullanıcının koyu veya açık renk şeması tercih edip etmediğini tespit edebilir ve buna göre farklı bir görüntü gösterebiliriz!

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

İşte bu kadar!

Varsayılan olarak, açık resmi gösterecek, ancak kişi karanlık düzeni tercih ederse koyu resmi gösterecektir.

Codepen’de bununla oynamaktan çekinmeyin.

Tarayıcı Desteği

Renk düzenini tercih etme desteği gün geçtikçe daha iyi hale geliyor, modern tarayıcılarda destekler destekleyen tarayıcılar.

Okuduğunuz için teşekkürler ve hadi bağlanalım

Blogumu okuduğunuz için teşekkür ederim. E-posta bültenime abone olmaktan ve Linkedin, Facebook veya Twitter’dan bağlanmaktan çekinmeyin