Nobenega dvoma ni, da je temni način danes v modi. Vse več aplikacij ponuja možnost preklopa na temno temo in z dobrim razlogom. Če želite svoji aplikaciji React dodati temni način, boste morali narediti nekaj stvari. V tem članku se boste naučili, kako dodati temni način aplikaciji React z uporabo kavljev useState in useEffect.

Kaj je temni način?

Temni način je tema, ki preklopi barvno paleto aplikacije iz svetle v temno. Dandanes ima večina aplikacij možnost preklapljanja med svetlim in temnim načinom. To je lahko koristno za tiste, ki raje delajo v temnem okolju, ali za tiste, ki jim je to lažje za oči.

Zakaj uporabljati temni način?

Obstaja več razlogov, zakaj bi morda želeli uporabiti temni način v svoji aplikaciji React. Oglejmo si nekaj najbolj priljubljenih.

1. Izboljšajte življenjsko dobo baterije

Ena od prednosti temnega načina je, da lahko pomaga podaljšati življenjsko dobo baterije na napravah z zasloni OLED ali AMOLED. To je zato, ker temnejše slikovne pike za prikaz potrebujejo manj energije.

instagram viewer

2. Zmanjšajte obremenitev oči

Če ponoči brskate po spletu ali uporabljate aplikacije, lahko temni način pomaga zmanjšati obremenitev oči. To je zato, ker zmanjša količino svetle bele ali modre svetlobe, ki jo oddaja zaslon.

3. Ustvarite bolj poglobljeno izkušnjo

Nekateri menijo, da temni način ustvari bolj poglobljeno izkušnjo. To lahko še posebej velja pri uporabi aplikacij ali spletnih mest z veliko vsebine, kot so novičarske aplikacije ali družbeni mediji.

Kako dodati temni način aplikaciji React

Dodajanje temnega načina aplikaciji React je relativno preprosto. Koraki, potrebni za dodajanje temnega načina vaši aplikaciji React, so navedeni spodaj.

Preden začnemo, se boste morali prepričati, da imate Nastavljena aplikacija React.

1. Uporabite kavelj useState

Prva stvar, ki jo boste morali narediti, je ustvariti spremenljivko stanja za sledenje trenutni temi vaše aplikacije. To lahko storite s kavljem useState. Za to bi morali imeti osnovno razumevanje kako delati s kavljem useState.

uvoz Odziv, {useState} od 'reagirati';
funkcijoaplikacija() {
 const [tema, setTheme] = useState('svetloba');
vrnitev (
`App ${tema}`}>
<h1>Pozdravljen, svet!</h1>
</div>
 );
}
izvozprivzeto aplikacija;

Delček kode uvozi kljuko useState iz Reacta in ustvari spremenljivko stanja, imenovano theme. Spremenljivka teme sledi trenutni temi aplikacije, ki jo koda privzeto nastavi na 'light'.

2. Dodajte preklopni gumb

Nato v aplikacijo dodajte preklopni gumb, da bodo uporabniki lahko preklapljali med svetlim in temnim načinom. To lahko storite z naslednjo kodo:

uvoz Odziv, {useState} od 'reagirati';
funkcijoaplikacija() {
 const [tema, setTheme] = useState('svetloba');
konst toggleTheme = () => {
 če (tema 'svetloba') {
 setTheme('temno');
 } drugače {
 setTheme('svetloba');
 }
 };
vrnitev (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Preklopi temo</button>
<h1>Pozdravljen, svet!</h1>
</div>
 );
}
izvozprivzeto aplikacija;

Zgornji delček kode vključuje funkcijo toggleTheme za spreminjanje spremenljivke stanja teme med »svetlo« in »temno« ter gumb za klic funkcije toggleTheme ob kliku.

3. Uporabite useEffect Hook

Nato uporabite kljuko useEffect za dinamično posodobitev teme aplikacije na podlagi spremenljivke stanja teme.

uvoz Odziv, {useState, useEffect} od 'reagirati';
funkcijoaplikacija() {
 const [tema, setTheme] = useState('svetloba');
konst toggleTheme = () => {
 če (tema 'svetloba') {
 setTheme('temno');
 } drugače {
 setTheme('svetloba');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
vrnitev (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Preklopi temo</button>
<h1>Pozdravljen, svet!</h1>
</div>
 );
}
izvozprivzeto aplikacija;

Zgornji delček kode uporablja kljuko useEffect za posodobitev className elementa document.body na podlagi spremenljivke stanja teme. To vam omogoča dinamično posodabljanje CSS aplikacije glede na temo.

4. Dodajanje CSS za temne in svetle načine

Nato dodajte CSS za temen in svetel način. To lahko storite tako, da ustvarite datoteko z imenom 'darkMode.css' in dodate naslednji CSS:

.temno {
 Barva ozadja: #333;
 barva: #fff;
}
.svetloba {
 Barva ozadja: #fff;
 barva: #333;
}

Po tem boste morali datoteko CSS uvoziti v svojo aplikacijo. To lahko storite z naslednjo kodo:

uvoz Odziv, {useState, useEffect} od 'reagirati';
uvoz './darkMode.css';
funkcijoaplikacija() {
 const [tema, setTheme] = useState('svetloba');
konst toggleTheme = () => {
 če (tema 'svetloba') {
 setTheme('temno');
 } drugače {
 setTheme('svetloba');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
vrnitev (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Preklopi temo</button>
<h1>Pozdravljen, svet!</h1>
</div>
 );
}
izvozprivzeto aplikacija;

5. Preklopite na različne načine

Zdaj, ko ste dodali CSS za temen in svetel način, lahko preklapljate med njima s klikom na preklopni gumb. Če želite to narediti, morate najprej zagnati razvojni strežnik. To lahko storite tako, da zaženete naslednji terminalski ukaz:

npm začetek

Po tem lahko odprete aplikacijo v brskalniku in kliknete preklopni gumb za preklop med temnim in svetlim načinom.

Dodatne možnosti za temni način v Reactu

Če želite, da se tema obdrži med osveževanjem strani, lahko uporabite API localStorage za shranjevanje podatkov. Če želite to narediti, morate svoji aplikaciji najprej dodati to kodo:

uvoz Odziv, {useState, useEffect} od 'reagirati';
uvoz './darkMode.css';
funkcijoaplikacija() {
konst [tema, setTheme] = useState(
 localStorage.getItem('tema') || 'svetloba'
 );
konst toggleTheme = () => {
 če (tema 'svetloba') {
 setTheme('temno');
 } drugače {
 setTheme('svetloba');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
dokument.body.className = tema;
 }, [tema]);
vrnitev (
`App ${tema}`}>
<gumb onClick={toggleTheme}>Preklopi temo</button>
<h1>Pozdravljen, svet!</h1>
</div>
 );
}
izvozprivzeto aplikacija;

Zgornji delček kode vključuje možnost ohranitve teme po osvežitvi strani. To se naredi z uporabo API-ja localStorage. Najprej preveri, ali je v localStorage shranjena tema.

Če obstaja tema, se ta tema uporabi. Če ni, se uporabi "lahka" tema. Nato se kljuki useEffect doda koda za shranjevanje teme v localStorage. To zagotavlja, da se tema obdrži med osveževanjem strani.

Temni način se ne konča v Reactu

Obstaja veliko načinov, kako lahko svoji aplikaciji React dodate temni način. V tem članku je prikazan en način, kako to storiti z uporabo kavljev useState in useEffect. Vendar pa obstaja tudi veliko drugih načinov, kako lahko to storite.

Na primer, lahko uporabite React Context API za ustvarjanje ponudnika tem. To bi vam omogočilo, da celotno aplikacijo zavijete v komponento ponudnika tem in dostopate do teme kjer koli v aplikaciji.

V brskalniku lahko omogočite tudi temni način in uporabite medijske poizvedbe CSS za uporabo različnih slogov glede na temo brskalnika.