Popularne stało się, że aplikacje mają ustawienie, które pozwala przełączać się między trybami ciemnym i jasnym. Może wynika to z popularności ciemnych interfejsów użytkownika, a może dlatego, że aplikacje stopniowo stają się coraz bardziej konfigurowalne.

Kontekst reakcji to łatwy sposób na globalne udostępnianie danych, ale może utrudnić ponowne wykorzystanie komponentów. Jako alternatywę możesz zbudować komponent przycisku trybu ciemnego, który używa hooków useEffect i useState zamiast kontekstu. Przełącza atrybut danych na elemencie body, na który mogą być kierowane style CSS.

Co będziesz potrzebował

Aby śledzić ten samouczek, będziesz potrzebować:

  • Najnowsza wersja Node zainstalowana na Twoim komputerze.
  • Podstawowe zrozumienie Reacta i Reaguj haki.
  • Startowy projekt React. Tylko utwórz aplikację React i jesteś gotowy do pracy.

Utwórz komponent przycisku

Komponent przycisku będzie odpowiedzialny za przełączanie motywu z ciemnego na jasny. W prawdziwej aplikacji ten przycisk może być częścią składnika Navbar.

instagram viewer

W folderze src utwórz nowy plik o nazwie Button.js i dodaj następujący kod.

import { stan użycia } z 'reagować'
eksportdomyślnafunkcjonowaćPrzycisk() {
 const [motyw, ustaw motyw] = useState("ciemny")
stały handleToggle = () => {
 const nowy motyw = motyw "światło"? "ciemny": "światło"
 ustaw motyw (nowy motyw)
 }
zwrócić (
<>
<button className="motywBtn" onClick={handleToggle}>
 {motyw "światło"? <Zakres>ciemny</span>: <Zakres>światło</span>}
</button>
</>
 )
}

Najpierw zaimportuj hook useState() z Reacta. Będziesz go używać do śledzenia aktualnego motywu.

W komponencie Button zainicjuj stan na ciemny. Funkcja handleToggle() zajmie się funkcją przełączania. Uruchamia się po każdym kliknięciu przycisku.

Ten składnik również przełącza tekst przycisku, gdy zmienia motyw.

Aby wyświetlić komponent Button, zaimportuj go do App.js.

import Przycisk z './Przycisk';
funkcjonowaćAplikacja() {
zwrócić (
<div>
<Przycisk/>
</div>
 );
}
eksportdomyślna Aplikacja;

Utwórz style CSS

W tej chwili kliknięcie przycisku nie zmienia interfejsu użytkownika aplikacji React. W tym celu musisz najpierw stworzyć style CSS dla trybu ciemnego i jasnego.

W App.css dodaj następujące.

ciało {
 --kolor-tekst-podstawowy: #131616;
 --kolor-tekst-dodatkowy: #ff6b00;
 --kolor-bg-podstawowy: #E6EDEE;
 --kolor-bg-dodatkowy: #7d86881c;
 tło: var(--kolor-bg-podstawowy);
 kolor: var(--kolor-tekst-podstawowy);
przemiana: tło 0.25swyluzować;
}
body[motyw-danych="światło"] {
 --kolor-tekst-podstawowy: #131616;
 --kolor-bg-podstawowy: #E6EDEE;
}
body[motyw-danych="ciemny"] {
 --kolor-tekst-podstawowy: #F2F5F7;
 --kolor-bg-podstawowy: #0E141B;
}

Tutaj definiujesz style elementu body za pomocą atrybutów danych. Istnieje atrybut danych jasnego motywu i atrybut danych ciemnego motywu. Każda z nich ma zmienne CSS o różnych kolorach. Korzystanie z atrybutów danych CSS pozwoli Ci przełączać style zgodnie z danymi. Jeśli użytkownik wybierze ciemny motyw, możesz ustawić atrybut danych ciała na ciemny, a interfejs użytkownika się zmieni.

Możesz także modyfikować style elementów przycisku, aby zmieniać je wraz z motywem.

.themeBtn {
 wypełnienie: 10px;
 kolor: var(--kolor-tekst-podstawowy);
 tło: przezroczyste;
 granica: 1piksel stały var(--kolor-tekst-podstawowy);
 kursor: wskaźnik;
}

Zmodyfikuj komponent przycisku, aby przełączyć style

Aby przełączać style zdefiniowane w pliku CSS, musisz ustawić dane w elemencie body w funkcji handleToggle().

W Button.js zmodyfikuj handleToggle() w następujący sposób:

stały handleToggle = () => {
 const nowy motyw = motyw "światło"? "ciemny": "światło"
 ustaw motyw (nowy motyw)
dokument.body.dataset.theme = motyw
}

Jeśli klikniesz przycisk, tło powinno zmienić się z ciemnego na jasne lub jasnego na ciemne. Jeśli jednak odświeżysz stronę, motyw zostanie zresetowany. Aby zachować ustawienia motywu, zapisz preferencje motywu w Lokalny magazyn.

Utrzymujące się preferencje użytkownika w pamięci lokalnej

Preferencje użytkownika należy pobrać zaraz po wyrenderowaniu komponentu Button. Hook useEffect() jest do tego idealny, ponieważ uruchamia się po każdym renderowaniu.

Przed pobraniem motywu z pamięci lokalnej musisz go najpierw zapisać.

Utwórz nową funkcję o nazwie storeUserPreference() w Button.js.

stały storeUserSetPreference = (pref) => {
 localStorage.setItem("motyw", pref);
};

Ta funkcja otrzymuje preferencje użytkownika jako argument i przechowuje je jako element o nazwie motyw.

Wywołasz tę funkcję za każdym razem, gdy użytkownik przełączy motyw. Zmodyfikuj więc funkcję handleToggle() tak, aby wyglądała tak:

stały handleToggle = () => {
 const nowy motyw = motyw "światło"? "ciemny": "światło"
 ustaw motyw (nowy motyw)
 storeUserSetPreference (nowy motyw)
dokument.body.dataset.theme = motyw
}

Poniższa funkcja pobiera motyw z pamięci lokalnej:

stały getUserSetPreference = () => {
 return localStorage.getItem("motyw");
};

Użyjesz go w haczyku useEffect, więc za każdym razem, gdy komponent zostanie wyrenderowany, pobierze preferencje z lokalnej pamięci, aby zaktualizować motyw.

useEffect(() => {
stały userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
dokument.body.dataset.theme = motyw
}, [motyw])

Pobieranie preferencji użytkownika z ustawień przeglądarki

Aby uzyskać jeszcze lepsze wrażenia użytkownika, możesz użyć preferuje schemat kolorów Funkcja multimediów CSS, aby ustawić motyw. Powinno to odzwierciedlać ustawienia systemowe użytkownika, którymi może sterować za pośrednictwem swojego systemu operacyjnego lub przeglądarki. Ustawienie może być jasne lub ciemne. W swojej aplikacji musisz sprawdzić to ustawienie natychmiast po załadowaniu komponentu przycisku. Oznacza to zaimplementowanie tej funkcjonalności w haczyku useEffect().

Najpierw utwórz funkcję, która pobiera preferencje użytkownika.

W Button.js dodaj następujące.

stały getMediaQueryPreference = () => {
 const mediaQuery = "(preferuje schemat kolorów: ciemny)";
stały mql = okno.matchMedia (mediaQuery);
stały maPreferencje = typ mql.dopasowuje „boolean”;
jeśli (ma preferencje) {
 zwrócić mql.matches? "ciemny": "światło";
 }
};

Następnie zmodyfikuj punkt zaczepienia useEffect(), aby pobrać preferencje zapytania o media i użyć go, jeśli w pamięci lokalnej nie ustawiono żadnego motywu.

useEffect(() => {
stały userSetPreference = getUserSetPreference();
stały mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } w przeciwnym razie {
 settheme (mediaQueryPreference)
 }
dokument.body.dataset.theme = motyw
}, [motyw])

Jeśli uruchomisz ponownie aplikację, motyw powinien pasować do ustawień twojego systemu.

Używanie kontekstu React do przełączania trybu ciemnego

Możesz użyć atrybutów danych, CSS i haków React, aby przełączać motyw aplikacji React.

Innym podejściem do obsługi trybu ciemnego w React jest użycie kontekstowego API. Kontekst React pozwala na udostępnianie danych między komponentami bez konieczności przekazywania ich przez rekwizyty. Używając go do przełączania motywów, tworzysz kontekst motywu, do którego masz dostęp w całej aplikacji. Następnie możesz użyć wartości motywu, aby zastosować pasujące style.

Chociaż to podejście działa, używanie atrybutów danych CSS jest prostsze.