CSS prefers-color-scheme Sorgusu

CSS’de prefers-color-scheme sorgusu ile web sayfanıza giren kişinin açık renk m yoksa koyu renk mi görmek istediğini anlayabilir ve buna göre renge duyarlı bir web sayfası geliştirebilirsiniz. İşletim sisteminde koyu modu kullanan birisi girdiğinde siteniz koyu, açık modu kullanan birisi girdiğinde ise siteniz açık renkte gözükebilir.

Kullanımı ise şöyle;

// karanlık modu seçenler için
@media(preferes-color-scheme: dark){

}

// açık modu seçenler için
@media(prefers-color-scheme: light){

}

Bunu kullanarak basit bir arkaplan değiştirme örneği yapacak olursak;

<div class="test">
   test yazı
</div>
<style>
:root {
   --test-bg: #eee;
}
@media(prefers-color-scheme: dark){
   :root {
      --test-bg: #333;
   }
}
.test {
   background-color: var(--test-bg);
   padding: 15px;
}
</style>

Daha detaylı bir anlatım için videoya bakabilirsiniz 🙂 Kolay gelsin.

Bir Cevap Yazın