Dark mode w react - jaka praktyka jest dobra?

pytanie zadane 26 lutego 2021 w JavaScript przez hakiros54 Obywatel (1,160 p.)

Witam, co jest uznawane za dobrą praktykę w robieniu dark mode'a w React'cie? Ostatnio zrobiłem to tak, że miałem przycisk który jak się kliknie to zmienia się state w reduxie i w potem w różnych komponentach pobieralem ten state i robiłem coś w stylu

<div className = {darkMode? "header dark-mode": "header"} />... </div>

// inny komponent

<div className = {darkMode? "main dark-mode": "main"}>...</div>

...

I tak dodawałem do każdego większego fragmenu strony a potem scssie odpowiednio stylizowałem.

Innym rozwiązaniem może być też dodanie tego po prostu do diva z całą aplikacją

<div className = {darkMode? "app dark-mode": "app"}>...</div>

dzięki czemu nie trzeba pobierać tego state'u w różnych komponentach, ale wydaje mi się to gorszym rozwiązaniem bo scss byłby mniej czytelny.

Znacie jakiś lepszy sposób?

2 odpowiedzi

odpowiedź 26 lutego 2021 przez JAKUBW Nałogowiec (33,470 p.)

Hej, dla dobra użytkownika powinieneś stosować się do cssowego prefers-color-scheme

To rozwiązanie jest lepsze od ifów w js, bo działa z wyłączonym javascriptem, zmienia się natychmiast gdy użytkownik zmieni motyw w urządzeniu i jest motyw jest taki sam na różnych stronach na tym samym urządzeniu. Możesz zrobić opcjonalny wybór w js, który nadpisze wartość css, ale domyślne zachowanie powinieneś brać z prefers-color-scheme.

Możesz użyć z zmiennych css w taki sposób:

:root {
        --primary-color: #4150b6;
}


@media (prefers-color-scheme: dark) {
   :root {
        --primary-color: #825BD9;
   }
}

p {
   background-color: var(--primary-color);
}