react
Jak uniknąć "błyskania" Dark Mode w aplikacjach React?
March 18, 2023
Dark Mode to coraz popularniejsza opcja w wielu aplikacjach, która umożliwia użytkownikom korzystanie z ciemnego tła i jaśniejszej czcionki. Jednakże, wraz z wprowadzeniem "Dark Mode" może pojawić się problem błyskania podczas ładowania strony internetowej w aplikacji webowej.
Jeśli zaimplementowałeś tryb "Dark Mode" do swojej aplikacji React opierając się na pamięci podręcznej, może się zdarzyć, że zaobserwujesz nagłą zmianę trybu podczas ładowania strony internetowej. Dzieje się tak dlatego, że aplikacja React jest renderowana po stronie klienta, a skrypt, który ustawia odpowiednią klasę na podstawie wartości w pamięci podręcznej, uruchamia się dopiero po załadowaniu pliku JavaScript.
Na szczęście istnieje proste rozwiązanie, które pozwala na uniknięcie błyskania i zapewnia płynne przejście między trybami. Polega ono na ustawieniu stylów z odpowiednim trybem jeszcze przed załadowaniem głównego pliku JavaScript z aplikacją React. Aby to osiągnąć, wystarczy dodać prosty skrypt do pliku HTML w sekcji <head>, przed głównym skryptem aplikacji:
<script is:inline>
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
})();
if (theme === 'light') {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
</script>Dzięki powyższemu kodowi, aplikacja nada klasę z odpowiednim trybem jeszcze przed załadowaniem głównego pliku JavaScript z aplikacją React. W efekcie użytkownik nie zaobserwuje nagłego mignięcia. Warto również zauważyć, że jeśli nie ma odpowiedniej wartości trybu "Dark Mode" w pamięci podręcznej przeglądarki, aplikacja automatycznie ustawi wartość na tryb odpowiadający trybowi systemu operacyjnego.