JavaScript ile dark mode sorgulamak

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