Temayı Kalıcı Kılma ve Parlamayı Önleme

Bir sayfa yüklendiğinde React, localStorage'ı okuyup doğru temayı uygulayabilmeden önce JavaScript'i indirmeli, ayrıştırmalı ve çalıştırmalıdır. Bu aralıkta tarayıcı, varsayılan stilleri kullanarak görüntü oluşturur. Kullanıcı koyu temayı tercih ediyor ancak varsayılanınız açık temaysa tema düzeltilmeden önce kısa süreli beyaz bir parlama görür.

Çözüm, diğer kodlardan önce eşzamanlı olarak çalışan ve document head içine yerleştirilen satır içi bir betiktir. Bu betik localStorage'ı hemen okur ve document.documentElement üzerinde data-theme ayarlar. Engelleyici bir betik olduğundan tarayıcı, herhangi bir içeriği ekrana çizmeden önce özniteliği uygular.

Eşzamansız veya ertelenmiş betikler, HTML ayrıştırıldıktan ve hatta ilk çizim yapıldıktan sonra çalışabilir. Bu da tüm amacın boşa çıkmasına neden olur. Engelleyici satır içi betikte async veya defer öznitelikleri bulunmamalı ve betik harici bir dosyadan yüklenmemelidir. Performans maliyetini en aza indirmek için betik çok küçük olmalıdır.

Engelleyici betik olabildiğince küçüktür: localStorage.getItem('theme') ile okuyun, yedek olarak window.matchMedia('(prefers-color-scheme: dark)').matches değerini kontrol edin, ardından document.documentElement.setAttribute('data-theme', theme) çağrısını yapın. localStorage'ın gizli gezinmede kullanılamaması ihtimaline karşı betiği bir hata yakalama bloğuna sarın.

Next.js'te, _document.js içinde next/script paketindeki Script bileşenini strategy="beforeInteractive" ile kullanın. beforeInteractive stratejisi, betiği sayfa JavaScript'i çalışmadan önce sayfanın HTML'sine ekler ve Next.js derleme işlem hattında aynı engelleyici davranışı sağlar.

Bir Vite veya Create React Uygulaması projesinde index.html dosyasını doğrudan düzenleyin ve satır içi betik etiketini diğer tüm betiklerden önce head içine yerleştirin. index.html tarayıcının giriş noktası olduğundan betik React başlatılmadan önce çalışır. 100 baytın altında kalması için betiği kısa tutun.

Sunucu tarafından oluşturulan bir uygulamada sunucu, istekle gönderilen bir çerezden temayı okuyabilir. Ardından tarayıcıya göndermeden önce oluşturulan HTML içinde data-theme ayarlar. Doğru tema HTML'nin ilk baytında bulunduğundan bu yaklaşım istemci tarafındaki parlamayı tamamen önler.

Tam akış şöyledir: tarayıcı HTML'yi indirir, ayrıştırıcı engelleyici satır içi betikle karşılaşır, betik localStorage'ı okur ve data-theme ayarlar, ayrıştırıcı devam eder, sayfa doğru temayla çizilir, React hidratasyon gerçekleştirir ve localStorage'dan aynı temayı alır. Kullanıcı başlangıçtan itibaren tek ve tutarlı bir tema görür.

Düzeltmenin çalıştığını doğrulamak için Chrome DevTools'u açın, Ağ sekmesine gidin ve hızı Slow 3G'ye sınırlayın. Sayfayı yeniden yükleyin. Yükleme sırasında bir tema değişikliği görüyorsanız parlama giderilmemiştir. Engelleyici betik yerindeyse yavaş bağlantılarda bile ilk çizim doğru temayı göstermelidir.

React'ın ilk durumu açık temayı varsayıyor ancak engelleyici betik hidratasyondan önce koyu temayı ayarlıyorsa React bir hidratasyon uyuşmazlığı uyarısı verebilir. Bunu önlemek için React tema durumunu ilk oluşturma sırasında localStorage'ı da okuyarak başlatın; böylece React tarafından oluşturulan HTML, engelleyici betiğin ayarladığı DOM durumuyla eşleşir.

Storybook ve sınama ortamları index.html dosyanızı yüklemez; bu nedenle engelleyici betik hiç çalışmaz. Bu ortamlarda varsayılan bir data-theme özniteliği uygulayan bir dekoratör veya sınama kurulumu sağlayın. Böylece bileşenleri yalıtılmış olarak geliştirirken oluşabilecek kafa karıştırıcı görsel tutarsızlıklar önlenir.

Yanlış tema parlamasını önlemek için belge başlığında ne tür bir betik kullanılmalıdır?

Herhangi bir çizim yapılmadan önce localStorage'ı okuyan ve data-theme ayarlayan küçük bir satır içi engelleyici betiği belge başlığına ekleyerek yanlış tema parlamasını önleyin. Next.js'te strategy="beforeInteractive" kullanın; Vite/CRA'da bunu doğrudan index.html dosyasına ekleyin. SSR uygulamaları temayı sunucu tarafında ayarlamak için bir çerez okuyabilir.