Sistem Renk Şemasını Algılama

prefers-color-scheme CSS medya sorgusu, kullanıcının işletim sistemini koyu veya açık renk teması kullanacak şekilde yapılandırıp yapılandırmadığını algılar. İki değer kabul eder: dark ve light. Bu tercih tarayıcıda değil, sistem ayarlarında işletim sistemi düzeyinde belirlenir.

@media (prefers-color-scheme: dark) { ... } kullanarak koyu stilleri yalnızca CSS ile uygulayabilirsiniz. Bu bloğun içinde renkleri, arka planları ve kenarlıkları koyu bir palete uyacak şekilde geçersiz kılarsınız. Bu yaklaşım JavaScript gerektirmez ve React bağlanmadan önce bile çalışır.

JavaScript'te window.matchMedia('(prefers-color-scheme: dark)') bir MediaQueryList nesnesi döndürür. Bunu React kancaları veya olay işleyicileri içinde mevcut sistem tercihini programlı olarak okumak için kullanabilirsiniz. Bu, CSS medya sorguları ile JS mantığınız arasındaki köprüdür.

MediaQueryList nesnesinde boole değer döndüren bir matches özelliği bulunur. matches değeri true ise sistem koyu moddadır; false ise açık moddadır. Tema durumunuzu başlatmak için bu değeri genellikle bağlanma sırasında bir kez okursunuz.

Kullanıcılar işletim sistemlerinin renk şemasını istedikleri zaman değiştirebilir. Dinamik olarak yanıt vermek için, güncellenmiş MediaQueryListEvent nesnesini alan handler ile mediaQuery.addEventListener('change', handler) çağrısını yapın. Olay nesnesinde yeni tercihi yansıtan bir matches boole değeri de bulunur.

Temiz bir yaklaşım, useSyncExternalStore kullanarak özel bir kanca oluşturmaktır. Kanca, mediaQuery.addEventListener öğesine abone olur ve mediaQuery.matches döndüren bir anlık görüntü işlevi sağlar. Böylece kanca, elle durum yönetimi gerektirmeden harici tarayıcı API'siyle eşzamanlı kalır.

Bileşeniniz bağlantısını kaldırdığında bellek sızıntılarını önlemek için olay dinleyicisini kaldırmanız gerekir. Bir useEffect temizleme işlevinde mediaQuery.removeEventListener('change', handler) çağrısını yapın. useSyncExternalStore ile abone olma işlevi, aynı işlemi yapan abonelikten çıkma işlevini döndürmelidir.

Sistem tercihi, işletim sisteminin bildirdiği tercihtir. Ancak kullanıcılar çoğu zaman uygulama temasını bağımsız olarak geçersiz kılmak ister; örneğin işletim sistemi koyu moddayken uygulamayı açık tutmak isteyebilir. Mimariniz, sistem varsayılanını localStorage içinde saklanan açık bir kullanıcı geçersiz kılmasından ayırmalıdır.

Chrome DevTools, işletim sistemi ayarlarınızı değiştirmeden renk şeması tercihlerini taklit etmenizi sağlar. DevTools'u açın, Oluşturma sekmesine gidin ve "CSS medya özelliği renk şeması tercihini taklit et" açılır menüsünü bulun. Bu özellik, geliştirme sırasında her iki temayı hızlıca test etmek için son derece değerlidir.

İyi bir koyu mod uygulaması, başlangıç noktası olarak sistem tercihini okur ve bunu hemen uygular. Böylece kullanıcının erişilebilirlik ayarına saygı gösterilir. Yalnızca kullanıcı uygulamanızda temayı açıkça değiştirdikten sonra farklı bir geçersiz kılma değerini saklamalı ve kullanmalısınız.

Sunucuda window.matchMedia mevcut değildir. Sunucuda işleme yapıyorsanız matchMedia çağrısından önce typeof window !== 'undefined' ile kontrol edin. SSR uygulamalarında, hidrasyon uyumsuzluklarını önlemek için kullanıcı tercihini bunun yerine bir çerezden veya HTTP üstbilgisinden okuyun.

Bir MediaQueryList nesnesinin hangi özelliği medya sorgusunun şu anda eşleşip eşleşmediğini belirtir?

prefers-color-scheme medya sorgusu, işletim sisteminin renk tercihini hem CSS hem de JavaScript'te kullanıma sunar. Değişiklikleri okumak ve dinlemek için window.matchMedia kullanın, olay dinleyicilerini her zaman temizleyin ve sistem varsayılanlarını kullanıcı geçersiz kılmalarından ayırın. Chrome DevTools taklidi, her iki temayı test etmeyi hızlandırır.