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.

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

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