
JavaScript ile Otomatik Koyu Tema
Koyu tema, şu anda bütün kullanıcıların bilgisayar veya telefon farketmeksizin severek kullandığı bir özellik. Kullanıcılar için koyu tema daha göz dostu bir ortam sağlarken, AMOLED ekranlı cihazlarda daha az pil kullanımını sağlıyor.

Web geliştiriciler koyu tema etkinleştirildiğinde temayı uygulamak için genellikle prefers-color-scheme
CSS media özelliğini kullanmayı tercih ediyorlar. prefers-color-scheme kullanıcının tema tercihini, işletim sistemininden veya kullanıcı ajanından edinir.
Aynı işi JavaScript kullanarak programsal olarak uygulamanıza sorunsuz bir şekilde adapte etmek istiyor olabilirsiniz. Bunun için JavaScript’in Window Interface’inde bulunan matchMedia()
fonksiyonunu prefers-color-scheme
CSS Media’sını kontrol etmesi için kullanabilirsiniz.
prefers-color-scheme
, sonuç olarak dark
veya light
döndürür. matchMedia()
fonksiyonu output olarak MediaQueryList
objesi döndürür. Ardından objenin boolean bir değer olan matches
property’sini okuyarak tema seçimini öğrenmiş oluruz.
Bu yazımızda sizlere ufak bir JavaScript tüyosü vermiş olduk, keyifli kodlamalar!