Nema sumnje da je mračni način rada ovih dana u modi. Sve više aplikacija nudi mogućnost prebacivanja na tamnu temu, i to s dobrim razlogom. Ako želite dodati mračni način rada svojoj React aplikaciji, morat ćete učiniti nekoliko stvari. U ovom ćete članku naučiti kako dodati mračni način rada u React aplikaciju pomoću kukica useState i useEffect.

Što je tamni način rada?

Tamni način je tema koja prebacuje paletu boja aplikacije iz svijetle u tamnu. Danas većina aplikacija ima mogućnost prebacivanja između svijetlog i tamnog načina rada. Ovo može biti od pomoći onima koji više vole raditi u mračnom okruženju ili onima kojima je to lakše za oči.

Zašto koristiti Dark Mode?

Postoji niz razloga zašto biste mogli koristiti tamni način rada u svojoj React aplikaciji. Pogledajmo nekoliko najpopularnijih.

1. Poboljšajte trajanje baterije

Jedna od prednosti tamnog načina rada je ta što može pomoći produžiti trajanje baterije na uređajima s OLED ili AMOLED zaslonima. To je zato što tamniji pikseli zahtijevaju manje energije za prikaz.

instagram viewer

2. Smanjite naprezanje očiju

Ako pregledavate web ili koristite aplikacije noću, tamni način rada može pomoći u smanjenju naprezanja očiju. To je zato što smanjuje količinu svijetle bijele ili plave svjetlosti koja se emitira sa zaslona.

3. Stvorite dojmljivije iskustvo

Neki ljudi smatraju da tamni način rada stvara impresivnije iskustvo. To može biti osobito točno kada koristite aplikacije ili web-mjesta s puno sadržaja, poput aplikacija za vijesti ili društvenih medija.

Kako dodati Dark Mode React aplikaciji

Dodavanje mračnog načina rada React aplikaciji je relativno jednostavno. Koraci potrebni za dodavanje tamnog načina rada vašoj React aplikaciji navedeni su u nastavku.

Prije nego što počnemo, morat ćete provjeriti imate li Postavljena aplikacija React.

1. Koristite kuku useState

Prva stvar koju ćete morati učiniti je stvoriti varijablu stanja za praćenje trenutne teme vaše aplikacije. To se može učiniti pomoću kuke useState. Za ovo biste trebali imati osnovno razumijevanje kako raditi s useState kukom.

uvoz Reagiraj, {useState} iz 'reagirati';
funkcijaaplikacija() {
 const [tema, setTheme] = useState('svjetlo');
povratak (
`App ${tema}`}>
<h1>Pozdrav svijete!</h1>
</div>
 );
}
izvozzadano aplikacija;

Isječak koda uvozi useState hook iz Reacta i stvara varijablu stanja pod nazivom theme. Varijabla teme prati trenutnu temu aplikacije, koju kod prema zadanim postavkama postavlja na 'light'.

2. Dodajte gumb za prebacivanje

Zatim dodajte gumb za prebacivanje u aplikaciju kako bi korisnici mogli prelaziti između svijetlog i tamnog načina rada. To se može učiniti sa sljedećim kodom:

uvoz Reagiraj, {useState} iz 'reagirati';
funkcijaaplikacija() {
 const [tema, setTheme] = useState('svjetlo');
konst prebacitemu = () => {
 ako (tema 'svjetlo') {
 setTheme('mračno');
 } drugo {
 setTheme('svjetlo');
 }
 };
povratak (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Uključi/isključi temu</button>
<h1>Pozdrav svijete!</h1>
</div>
 );
}
izvozzadano aplikacija;

Gornji isječak koda uključuje funkciju toggleTheme za promjenu varijable stanja teme između 'svijetlo' i 'tamno', kao i gumb za pozivanje funkcije toggleTheme kada se klikne.

3. Koristite useEffect Hook

Zatim upotrijebite kuku useEffect za dinamičko ažuriranje teme aplikacije na temelju varijable stanja teme.

uvoz Reagiraj, {useState, useEffect} iz 'reagirati';
funkcijaaplikacija() {
 const [tema, setTheme] = useState('svjetlo');
konst prebacitemu = () => {
 ako (tema 'svjetlo') {
 setTheme('mračno');
 } drugo {
 setTheme('svjetlo');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
povratak (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Uključi/isključi temu</button>
<h1>Pozdrav svijete!</h1>
</div>
 );
}
izvozzadano aplikacija;

Gornji isječak koda koristi kuku useEffect za ažuriranje className elementa document.body na temelju varijable stanja teme. To vam omogućuje dinamičko ažuriranje CSS-a aplikacije na temelju teme.

4. Dodavanje CSS-a za tamni i svijetli način rada

Zatim dodajte CSS za tamni i svijetli način rada. To možete učiniti stvaranjem datoteke pod nazivom 'darkMode.css' i dodavanjem sljedećeg CSS-a:

.tamno {
 boja pozadine: #333;
 boja: #F F F;
}
.svjetlo {
 boja pozadine: #F F F;
 boja: #333;
}

Nakon toga ćete morati uvesti CSS datoteku u svoju aplikaciju. To se može učiniti sa sljedećim kodom:

uvoz Reagiraj, {useState, useEffect} iz 'reagirati';
uvoz './darkMode.css';
funkcijaaplikacija() {
 const [tema, setTheme] = useState('svjetlo');
konst prebacitemu = () => {
 ako (tema 'svjetlo') {
 setTheme('mračno');
 } drugo {
 setTheme('svjetlo');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
povratak (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Uključi/isključi temu</button>
<h1>Pozdrav svijete!</h1>
</div>
 );
}
izvozzadano aplikacija;

5. Prebacivanje na različite načine rada

Sada kada ste dodali CSS za tamni i svijetli način rada, možete se prebacivati ​​između njih klikom na gumb za prebacivanje. Da biste to učinili, prvo morate pokrenuti razvojni poslužitelj. To možete učiniti pokretanjem sljedeće naredbe terminala:

npm početak

Nakon toga možete otvoriti aplikaciju u pregledniku i kliknuti gumb za prebacivanje za prebacivanje između tamnog i svijetlog načina rada.

Dodatne opcije za Dark Mode u Reactu

Ako želite da se tema zadrži tijekom osvježavanja stranice, možete koristite API localStorage za pohranu podataka. Da biste to učinili, prvo ćete morati dodati sljedeći kod svojoj aplikaciji:

uvoz Reagiraj, {useState, useEffect} iz 'reagirati';
uvoz './darkMode.css';
funkcijaaplikacija() {
konst [tema, setTheme] = useState(
 localStorage.getItem('tema') || 'svjetlo'
 );
konst prebacitemu = () => {
 ako (tema 'svjetlo') {
 setTheme('mračno');
 } drugo {
 setTheme('svjetlo');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
dokument.body.className = tema;
 }, [tema]);
povratak (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Uključi/isključi temu</button>
<h1>Pozdrav svijete!</h1>
</div>
 );
}
izvozzadano aplikacija;

Gornji isječak koda uključuje mogućnost zadržavanja teme nakon osvježavanja stranice. To se radi pomoću API-ja localStorage. Prvo provjerava postoji li tema pohranjena u localStorage.

Ako postoji tema, ta se tema koristi. Ako nije, koristi se 'light' tema. Zatim se kod useEffect kuke dodaje za pohranjivanje teme u localStorage. Time se osigurava zadržavanje teme tijekom osvježavanja stranice.

Dark Mode ne završava u Reactu

Postoji mnogo načina na koje možete dodati mračni način rada svojoj React aplikaciji. U ovom je članku prikazan jedan način kako to učiniti pomoću kukica useState i useEffect. Međutim, postoje i mnogi drugi načini na koje to možete učiniti.

Na primjer, možete koristiti React Context API za izradu pružatelja tema. To bi vam omogućilo da cijelu svoju aplikaciju omotate komponentom pružatelja tema i pristupite temi bilo gdje u vašoj aplikaciji.

Također možete omogućiti tamni način rada u svom pregledniku i koristiti CSS medijske upite za primjenu različitih stilova ovisno o temi preglednika.