Arkadaşlar selam, uzun süredir React projelerimde karanlık mod desteği eklemeye çalışıyorum ama her seferinde farklı bir yaklaşım deniyorum ve hangisinin daha sürdürülebilir olduğuna karar veremiyorum. Genelde styled-components ya da CSS modülleri kullanıyorum, ama temalar arası geçişi global state ile yönetmek mi yoksa CSS değişkenleriyle (custom properties) halletmek mi daha mantıklı? Özellikle Context API kullanarak tema bilgisini tüm bileşenlere dağıtmak bazen performans sorunlarına yol açıyor, özellikle büyük ölçekli projelerde gereksiz yeniden renderlar can sıkıcı olabiliyor. Siz bu geçişi nasıl yönetiyorsunuz, Redux gibi bir state yönetim aracına ihtiyaç duyuyor musunuz?
Bir de işin localStorage kısmı var. Kullanıcının tercihini kaydedip sayfa yenilendiğinde hatırlaması güzel, ama bu işlemi useEffect içinde yapmak bazen ilk render sırasında yanıp sönmelere (flash) sebep oluyor. Bir arkadaşım "prefers-color-scheme" medya sorgusuyla sistem ayarını okuyup varsayılan tema olarak kullanmayı önerdi, ama bu sefer de kullanıcı eliyle değiştirdiğinde çakışmalar oluyor. Siz bu tercih çakışmalarını nasıl çözüyorsunuz? Özellikle SSR (Next.js gibi) ortamlarda bu işler daha da karışık hale geliyor, server tarafında tema bilgisi olmadığı için HTML ile client arasında uyumsuzluk yaşanabiliyor.
Son olarak, animasyonlu geçişler konusunda ne düşünüyorsunuz? CSS transition ile background-color veya color değişimlerini yumuşatmak hoş oluyor, ama bazen bu geçişler sayfa ilk yüklenirken ya da büyük liste renderlarında kasma yapabiliyor. Acaba bu geçişleri sadece belirli bileşenlerde mi kullanmalıyız, yoksa tüm temaya mı yaymalıyız? Benim aklımda "CSS custom properties + React Context + useReducer" üçlemesi var, ama sizin tecrübelerinizi duymak isterim. Şimdiden teşekkürler.
Bir de işin localStorage kısmı var. Kullanıcının tercihini kaydedip sayfa yenilendiğinde hatırlaması güzel, ama bu işlemi useEffect içinde yapmak bazen ilk render sırasında yanıp sönmelere (flash) sebep oluyor. Bir arkadaşım "prefers-color-scheme" medya sorgusuyla sistem ayarını okuyup varsayılan tema olarak kullanmayı önerdi, ama bu sefer de kullanıcı eliyle değiştirdiğinde çakışmalar oluyor. Siz bu tercih çakışmalarını nasıl çözüyorsunuz? Özellikle SSR (Next.js gibi) ortamlarda bu işler daha da karışık hale geliyor, server tarafında tema bilgisi olmadığı için HTML ile client arasında uyumsuzluk yaşanabiliyor.
Son olarak, animasyonlu geçişler konusunda ne düşünüyorsunuz? CSS transition ile background-color veya color değişimlerini yumuşatmak hoş oluyor, ama bazen bu geçişler sayfa ilk yüklenirken ya da büyük liste renderlarında kasma yapabiliyor. Acaba bu geçişleri sadece belirli bileşenlerde mi kullanmalıyız, yoksa tüm temaya mı yaymalıyız? Benim aklımda "CSS custom properties + React Context + useReducer" üçlemesi var, ama sizin tecrübelerinizi duymak isterim. Şimdiden teşekkürler.