Kategoriler
Genel

JavaScript ile dark mode sorgulamak

Javascript ile siteyi ziyaret eden cihazın karanlık modu(koyu mod) kulanıp kullanmadığını sorulamak.

Javascipt ile siteyi ziyaret eden cihazın karanlık modu(dark mode) kullanıp kullanmadığını sorgulamak çok basit. Aşağıya ilgili if kodunu koyacağım ayrıca CSS içerisinde de koyu moda göre sitiller eklenebiliyor.

Dark mode sorgulayan Javascipt örneği:

const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;

if(userPrefersDark){
   /*dark modu kullanan cihaz için seçimler*/
}

CSS örneği:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

 

Bu Javascipt veya CSS’i kullanarak sitenin dark mode kullanan cihazda farklı/koyu görünmesini sağlayabilirsiniz.

 

Kaynaklar:

https://web.dev/prefers-color-scheme/

https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr