Arkadaşlar selam, son günlerde React projeme dark mode eklemekle uğraşıyorum. Tailwind kullanıyorum ve `dark:` varyantı sayesinde class bazlı geçiş yapmak çok kolay gibi görünüyor. Ama işin içine girince bazı tıkanıklıklar yaşadım. Özellikle state yönetimini nasıl yapacağım konusunda kararsız kaldım. `useState` ile basit bir toggle yapıp `localStorage`'da saklamak iş görür mü? Yoksa daha büyük projelerde Context API veya Redux gibi bir yapı mı kurmak gerekli? Ben şu an butona tıklayınca `dark` classını `<html>` elementine ekleyip kaldıracak bir sistem düşünüyorum. Ama sistem temasını (system preference) da göz önünde bulundurmak istiyorum. Yani kullanıcı sisteminde dark moddaysa site otomatik dark açsın, ama kullanıcı butonla manuel değiştirirse onun tercihi kalsın. Bunu `matchMedia` ile çözmeye çalışıyorum ama iki durum arasında geçişlerde bazen çakışma oluyor. Sayfa yenilenince tema sıfırlanıyor ya da localStorage'daki değer sistem temasıyla çelişiyor.
Bir de şu sorun var: Tailwind'in `darkMode: 'class'` stratejisini kullanıyorum. Ama üçüncü parti kütüphanelerle uyum sorunu yaşıyorum. Mesela bir date picker veya toast bildirimi kullanıyorum, onların stilleri dark modda bozuluyor. Onları da elle düzenlemek gerekiyor. Bu konuda tecrübesi olan var mı? Nasıl bir yol izliyorsunuz? Belki `prefers-color-scheme` medya sorgusunu dinleyip otomatik geçiş yapsak daha temiz olur? Ama o zaman da butonla manuel kontrolü kaybediyoruz. Sizce en sağlıklısı nedir?
Son olarak performans açısından bir endişem var. Büyük bir projede `dark:` classları sayesinde CSS yeniden derleniyor mu? Yoksa Tailwind zaten tüm varyantları derleyip gönderiyor mu? Geçiş anında sayfanın yeniden render olması normal mi, yoksa bir optimizasyon yapmam mı gerek? Deneyimlerinizi merak ediyorum. Özellikle bu işi bir kere oturtup unutmak istiyorum, sürekli uğraştıran bir yapı olmasın. Siz nasıl çözüyorsunuz bu dark mode işini?
Bir de şu sorun var: Tailwind'in `darkMode: 'class'` stratejisini kullanıyorum. Ama üçüncü parti kütüphanelerle uyum sorunu yaşıyorum. Mesela bir date picker veya toast bildirimi kullanıyorum, onların stilleri dark modda bozuluyor. Onları da elle düzenlemek gerekiyor. Bu konuda tecrübesi olan var mı? Nasıl bir yol izliyorsunuz? Belki `prefers-color-scheme` medya sorgusunu dinleyip otomatik geçiş yapsak daha temiz olur? Ama o zaman da butonla manuel kontrolü kaybediyoruz. Sizce en sağlıklısı nedir?
Son olarak performans açısından bir endişem var. Büyük bir projede `dark:` classları sayesinde CSS yeniden derleniyor mu? Yoksa Tailwind zaten tüm varyantları derleyip gönderiyor mu? Geçiş anında sayfanın yeniden render olması normal mi, yoksa bir optimizasyon yapmam mı gerek? Deneyimlerinizi merak ediyorum. Özellikle bu işi bir kere oturtup unutmak istiyorum, sürekli uğraştıran bir yapı olmasın. Siz nasıl çözüyorsunuz bu dark mode işini?