Postalo je popularno da aplikacije imaju postavku koja vam omogućuje prebacivanje između tamnog i svijetlog načina rada. Možda je to zbog popularnosti mračnih korisničkih sučelja, možda zato što aplikacije postupno postaju sve konfigurabilnije.

React kontekst je jednostavan način dijeljenja podataka na globalnoj razini, ali može otežati ponovnu upotrebu komponenti. Kao alternativu, možete izgraditi komponentu gumba tamnog načina rada koja koristi useEffect i useState kuke umjesto konteksta. Uključit će atribut podataka na elementu tijela koji CSS stilovi mogu ciljati.

Što ćete trebati

Da biste pratili ovaj vodič, trebat će vam sljedeće:

  • Najnovija verzija Nodea instalirana na vašem računalu.
  • Osnovno razumijevanje Reacta i Reagirajte kuke.
  • Početni React projekt. Samo izraditi React aplikaciju i spremni ste za polazak.

Napravite komponentu gumba

Komponenta gumba bit će odgovorna za prebacivanje teme iz tamne u svijetlu. U stvarnoj aplikaciji ovaj gumb može biti dio komponente Navbar.

U mapi src kreirajte novu datoteku pod nazivom Button.js i dodajte sljedeći kod.

instagram viewer 
uvoz {useState} iz 'reagirati'
izvozzadanofunkcijaDugme() {
 const [tema, settheme] = useState("mračno")
konst handleToggle = () => {
 const novaTema = tema "svjetlo"? "mračno": "svjetlo"
 postavi temu (nova tema)
 }
povratak (
<>
<gumb className="temaBtn" onClick={handleToggle}>
 {tema "svjetlo"? <raspon>mračno</span>: <raspon>svjetlo</span>}
</button>
</>
 )
}

Prvo uvezite useState() kuku iz Reacta. Koristit ćete ga za praćenje trenutne teme.

U komponenti Button inicijalizirajte stanje na tamno. Funkcija handleToggle() pobrinut će se za funkciju prebacivanja. Pokreće se svaki put kada se pritisne gumb.

Ova komponenta također mijenja tekst gumba kada mijenja temu.

Za prikaz komponente Button uvezite je u App.js.

uvoz Dugme iz './Dugme';
funkcijaaplikacija() {
povratak (
<div>
<Dugme/>
</div>
 );
}
izvozzadano aplikacija;

Napravite CSS stilove

Trenutno, klik na gumb ne mijenja korisničko sučelje aplikacije React. Za to ćete prvo morati stvoriti CSS stilove za tamni i svijetli način rada.

U App.css dodajte sljedeće.

tijelo {
 --color-text-primary: #131616;
 --color-text-secondary: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 pozadina: var(-boja-bg-primarni);
 boja: var(--boja-teksta-primarna);
tranzicija: pozadina 0.25sease-in-out;
}
tijelo[podaci-tema="svjetlo"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
tijelo[podaci-tema="mračno"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Ovdje definirate stilove elementa tijela pomoću atributa podataka. Postoji atribut podataka svijetle teme i atribut podataka tamne teme. Svaki od njih ima CSS varijable s različitim bojama. Korištenje CSS atributa podataka omogućit će vam promjenu stilova prema podacima. Ako korisnik odabere tamnu temu, možete postaviti atribut podataka tijela na tamno i korisničko sučelje će se promijeniti.

Također možete modificirati stilove elementa gumba kako biste se mijenjali s temom.

.themeBtn {
 ispuna: 10px;
 boja: var(--boja-teksta-primarna);
 pozadina: prozirna;
 granica: 1px čvrsta var(--boja-teksta-primarna);
 kursor: pokazivač;
}

Izmijenite komponentu gumba za prebacivanje stilova

Za promjenu stilova definiranih u CSS datoteci morat ćete postaviti podatke u elementu body u funkciji handleToggle().

U Button.js modificirajte handleToggle() ovako:

konst handleToggle = () => {
 const novaTema = tema "svjetlo"? "mračno": "svjetlo"
 postavi temu (nova tema)
dokument.body.dataset.theme = tema
}

Ako kliknete na gumb, pozadina bi se trebala mijenjati iz tamne u svijetlu ili svijetlu u tamnu. Međutim, ako osvježite stranicu, tema se resetira. Da biste zadržali postavku teme, pohranite postavke teme u lokalna pohrana.

Trajne korisničke postavke u lokalnoj pohrani

Trebali biste dohvatiti korisničke postavke čim se komponenta gumba prikaže. UseEffect() kuka je savršena za ovo jer se pokreće nakon svakog renderiranja.

Prije preuzimanja teme iz lokalne pohrane, prvo je trebate pohraniti.

Napravite novu funkciju pod nazivom storeUserPreference() u Button.js.

konst storeUserSetPreference = (pref) => {
 localStorage.setItem("tema", pref);
};

Ova funkcija prima korisničku postavku kao argument i pohranjuje je kao stavku pod nazivom tema.

Ovu ćete funkciju pozvati svaki put kada korisnik promijeni temu. Dakle, promijenite funkciju handleToggle() da izgleda ovako:

konst handleToggle = () => {
 const novaTema = tema "svjetlo"? "mračno": "svjetlo"
 postavi temu (nova tema)
 storeUserSetPreference (nova tema)
dokument.body.dataset.theme = tema
}

Sljedeća funkcija dohvaća temu iz lokalne pohrane:

konst getUserSetPreference = () => {
 return localStorage.getItem("tema");
};

Upotrijebit ćete ga u useEffect kuki tako da svaki put kada se komponenta renderira, dohvaća postavke iz lokalne pohrane za ažuriranje teme.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
if (userSetPreference) {
 postavi temu (userSetPreference)
 }
dokument.body.dataset.theme = tema
}, [tema])

Dohvaćanje korisničkih postavki iz postavki preglednika

Za još bolje korisničko iskustvo možete koristiti preferira shemu boja CSS medijska značajka za postavljanje teme. To bi trebalo odražavati sistemske postavke korisnika kojima može upravljati putem svog OS-a ili preglednika. Postavka može biti svijetla ili tamna. U svojoj aplikaciji trebali biste provjeriti ovu postavku odmah nakon učitavanja komponente gumba. To znači implementirati ovu funkcionalnost u useEffect() kuku.

Prvo stvorite funkciju koja dohvaća korisničke postavke.

U Button.js dodajte sljedeće.

konst getMediaQueryPreference = () => {
 const mediaQuery = "(preferira shemu boja: tamno)";
konst mql = prozor.matchMedia (mediaQuery);
konst hasPreference = vrsta mql.podudara se s "booleovim";
if (hasPreference) {
 vratiti mql.podudaranja? "mračno": "svjetlo";
 }
};

Zatim promijenite useEffect() kuku da biste dohvatili preferencu medijskog upita i upotrijebili je ako tema nije postavljena u lokalnoj pohrani.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 postavi temu (userSetPreference)
 } drugo {
 postavi temu (mediaQueryPreference)
 }
dokument.body.dataset.theme = tema
}, [tema])

Ako ponovno pokrenete aplikaciju, tema bi trebala odgovarati postavkama vašeg sustava.

Korištenje React konteksta za prebacivanje tamnog načina rada

Možete koristiti atribute podataka, CSS i React kuke za promjenu teme React aplikacije.

Drugi pristup rukovanju mračnim načinom rada u Reactu je korištenje kontekstnog API-ja. Kontekst Reacta omogućuje vam dijeljenje podataka između komponenti bez potrebe da ih prosljeđujete kroz rekvizite. Kada ga upotrebljavate za prebacivanje tema, stvarate kontekst teme kojem možete pristupiti u cijeloj aplikaciji. Zatim možete upotrijebiti vrijednost teme za primjenu odgovarajućih stilova.

Iako ovaj pristup funkcionira, korištenje CSS atributa podataka je jednostavnije.