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!