Kategoriler
Kodlama

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.com’da JavaScript ile dark mode sorgulamak veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, JavaScript ile dark mode sorgulamak 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.