Tema Durumu için React Context

Bağlamınızın yapısıyla eşleşen bir varsayılan değerle createContext() çağırarak başlayın: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Varsayılan değer yalnızca bir bileşen, üstünde bir sağlayıcı olmadan bağlamı okuduğunda kullanılır; bu da yalıtılmış bileşenlerin sınanmasına yardımcı olur.

ThemeProvider bileşeni, tüm tema mantığını barındıran bir sarmalayıcıdır. Bağlanma sırasında sistem tercihini okur, theme durumunu yönetir, bir toggleTheme işlevi sağlar ve alt bileşenleri ThemeContext.Provider value={{ theme, toggleTheme }} içine sarar. Bu bileşeni bileşen ağacınızın üst kısımlarına yerleştirin.

Her alt bileşen, useContext(ThemeContext) çağırarak temaya erişebilir. Bu çağrı, theme ve toggleTheme dahil olmak üzere geçerli bağlam değerini döndürür. Tema değiştiğinde bileşen otomatik olarak yeniden oluşturulur; böylece özellikleri katmanlar boyunca aktarmaya gerek kalmadan her zaman eşzamanlı kalır.

CSS değişkenleri, kök öğedeki bir data-theme özniteliğine bağlıdır. ThemeProvider içinde, theme her değiştiğinde çalışan bir useEffect ekleyin: document.documentElement.setAttribute('data-theme', theme). Bu işlem React durumuyla CSS katmanını sorunsuz biçimde birbirine bağlar.

Kullanıcının seçimini sayfa yeniden yüklendikten sonra da korumak için tema her değiştiğinde localStorage'a yazın: localStorage.setItem('theme', theme). Bu mantığı, durum benzeri bir ikili döndüren ve her güncellemeyi otomatik olarak saklayan özel bir useLocalStorage kancasında kapsülleyebilirsiniz.

Tema durumunu başlatırken önce localStorage'dan okuyun: localStorage.getItem('theme'). Saklanan bir değer yoksa window.matchMedia('(prefers-color-scheme: dark)').matches aracılığıyla sistem tercihine başvurun. Bu başlatma işlemi bağlanma sırasında yalnızca bir kez çalışır.

Yüksekten düşüğe doğru doğru öncelik sırası şöyledir: localStorage'daki saklanan kullanıcı tercihi, ardından sistemin OS tercihi ve son olarak sabit kodlanmış bir varsayılan değer (genellikle açık tema). Bu sıra, kullanıcıya her zaman son söz hakkını verirken uygulamada açıkça seçim yapmamışsa OS yapılandırmasına da saygı gösterilmesini sağlar.

Her bileşende doğrudan useContext(ThemeContext) çağırmak uygulama ayrıntılarını açığa çıkarır. Bunun yerine bir useTheme kancası dışa aktarın: function useTheme() { return useContext(ThemeContext); }. Bileşenler artık temelindeki bağlamı bilmeden useTheme kancasını içe aktarabilir ve çağırabilir.

toggleTheme işlevi light ve dark arasında geçiş yapar: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Ağaçtaki herhangi bir düğmenin bu işlevi tetikleyebilmesi için işlevi bağlam üzerinden dışa açın. Durum tek bir yerde tutulur; geçiş mantığı her yerde paylaşılır.

Bağlam değerini içeren nesne, ThemeProvider her yeniden oluşturulduğunda yeniden oluşturulur. Tüm bağlam tüketicilerinin gereksiz yeniden oluşturulmasını önlemek için nesneyi useMemo ile sarın: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Bu, bağlam sağlayıcıları için yaygın bir performans iyileştirmesidir.

Sınamalarda, oluşturma işlemlerini sarmalayıcı olarak ThemeProvider kullanan özel bir renderWithTheme yardımcı programıyla sarın. Yalıtılmış sınamalar için basit bir sahte bağlam da oluşturabilirsiniz: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Böylece bileşenleri belirli bir tema durumunda sınayabilirsiniz.

Uygulama temasını başlatmak için yüksekten düşük önceliğe doğru doğru öncelik sırası nedir?

Tema durumunu yöneten, localStorage ile eşzamanlanan ve belgede data-theme ayarlayan bir ThemeContext ile ThemeProvider oluşturun. Temiz bir kullanım için useTheme kolaylık kancasını kullanın. Öncelik sırası: saklanan tercih, ardından sistem tercihi ve son olarak varsayılan değer.