Merhaba bu yazımızda kullanıcının bilgisayarının tema bilgisine ulaşacağız. Bununla eğer bilgisayarımız açık ve koyu mod destekliyorsa otomatik olarak tema yönlendirmesi yapabiliriz. Hadi başlayalım önce javascript

sayfamıza tema bilgisini yazdıracağımız bir div ekliyoruz.

<div class="temabilgisi"></div>

javascriptin matchMedia fonksiyonu ile bilgisayarın tema kontrolünü yapıyoruz ve ekrana yazdırıyoruz.

<script type="text/javascript">

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Karanlık modda 
 document.getElementsByClassName("temabilgisi")[0].innerHTML = "Kullanıcı karanlık mod kullanıyor";
} else {
    // Aydınlık modda
 document.getElementsByClassName("temabilgisi")[0].innerHTML = "Kullanıcı aydınlık mod kullanıyor'"; 
}
</script>

peki bu işlemi biraz daha dinamik hale getirelim mesela kullanıcı sayfa açıkken temayı değiştirdiğinde sitemizin teması da değişsin.
bunun için yapmamız gereken kodlar

  // Tema değişikliği kontrol fonksiyonu
    function applyThemePreference(e) {
        if (e.matches) {
            // Karanlık mod
            document.body.classList.add('dark-mode');
            document.body.classList.remove('light-mode');
            console.log('Kullanıcı karanlık moda geçti');
            document.getElementsByClassName("temabilgisi")[0].innerHTML = "Kullanıcı karanlık moda geçti";


        } else {
            // Aydınlık mod
            document.body.classList.add('light-mode');
            document.body.classList.remove('dark-mode');
            console.log('Kullanıcı aydınlık moda geçti');
            document.getElementsByClassName("temabilgisi")[0].innerHTML = "Kullanıcı aydınlık moda geçti";
        }


    }

    // İlk kontrol
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    applyThemePreference(darkModeMediaQuery);

    // Tema değişikliği olduğunda çalışacak olay dinleyicisi
    darkModeMediaQuery.addEventListener('change', applyThemePreference);
</script>

burada da hem consola yazırıyoruz hemde temabilgisi clasına sahip  div’e yazdırıyoruz.

şimdi bunu jquery ile nasıl yapacağımıza bakalım yine matchMedia fonksiyonunu kullanarak yapıyoruz işte kodlar

öncelikle sayfamıza jquery kütüphanesi dahil edelim.

<script src="js/jquery-3.3.1.min.js"></script>

ardından tema değiştiğinde sayfamızın bunu algılamasını sağlayan kodu yazalım.

<script type="text/javascript">

$(document).ready(function() {
    // Tema değişikliği kontrol fonksiyonu
    function applyThemePreference(e) {
        if (e.matches) {
            // Karanlık mod
            $('body').addClass('dark-mode').removeClass('light-mode');
            console.log('Kullanıcı karanlık moda geçti');
           $(".temabilgisi").html("Kullanıcı karanlık moda geçti");
        } else {
            // Aydınlık mod
            $('body').addClass('light-mode').removeClass('dark-mode');
            console.log('Kullanıcı aydınlık moda geçti');
           $(".temabilgisi").html("Kullanıcı aydınlık moda geçti");
        }
    }

    // İlk kontrol
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    applyThemePreference(darkModeMediaQuery);

    // Tema değişikliği olduğunda çalışacak olay dinleyicisi
    darkModeMediaQuery.addEventListener('change', applyThemePreference);
});

</script>