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.

https://codepen.io/rebelchris/pen/bGewmom
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

Websitesine kolayca dark mode eklemek – Herhangi bir web sitesine veya uygulamaya dark mode(Koyu renk, karanlık tema veya gece modu) uygulamak.
WOLKANCA

Volkan Yılmaz

HTML ile görsellerde dark mode seçeneği başlıklı gönderi hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin.