Kategoriler
Kodlama

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

Resimleri kullanıcının tercih ettiği renk düzenine göre değiştirebileceğinizi biliyor muydunuz?

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.

Light and dark mode image in HTML

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

wolkanca.com’da HTML ile görsellerde dark mode seçeneği veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, HTML ile görsellerde dark mode seçeneği için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.