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