Pole kahtlust, et tume režiim on tänapäeval moes. Üha enam rakendusi pakuvad võimalust lülituda tumedale teemale ja seda mõjuval põhjusel. Kui soovite oma Reacti rakendusele lisada tumeda režiimi, peate tegema mõned asjad. Sellest artiklist saate teada, kuidas lisada Reacti rakendusele tume režiim konksude useState ja useEffect abil.

Mis on tume režiim?

Tume režiim on teema, mis muudab rakenduse värvipaleti heledast tumedaks. Tänapäeval on enamikul rakendustel võimalus lülituda heledate ja tumedate režiimide vahel. See võib olla abiks neile, kes eelistavad töötada pimedas keskkonnas, või neile, kellel on silmadele kergem olla.

Miks kasutada tumedat režiimi?

On mitmeid põhjuseid, miks võiksite oma Reacti rakenduses kasutada tumedat režiimi. Vaatame mõnda kõige populaarsemat.

1. Parandage aku tööiga

Üks pimeda režiimi eeliseid on see, et see võib aidata parandada OLED- või AMOLED-ekraaniga seadmete aku kasutusaega. Seda seetõttu, et tumedamate pikslite kuvamiseks kulub vähem energiat.

2. Vähendage silmade pinget

instagram viewer

Kui avastate end öösel veebi sirvimas või rakendusi kasutamas, võib tume režiim aidata vähendada silmade pinget. Seda seetõttu, et see vähendab ekraanilt kiirgava ereda valge või sinise valguse hulka.

3. Looge kaasahaaravam kogemus

Mõned inimesed leiavad, et tume režiim loob kaasahaaravama kogemuse. See võib olla eriti tõsi siis, kui kasutate palju sisuga rakendusi või veebisaite, näiteks uudisterakendusi või sotsiaalmeediat.

Kuidas lisada React-rakendusele tumedat režiimi

Tumeda režiimi lisamine Reacti rakendusele on suhteliselt lihtne. Allpool on loetletud sammud, mis on vajalikud oma Reacti rakendusele tumeda režiimi lisamiseks.

Enne alustamist peate veenduma, et teil on a Reaktsioonirakendus on seadistatud.

1. Kasutage funktsiooni useState Hook

Esimese asjana peate looma olekumuutuja, et jälgida oma rakenduse praegust teemat. Seda saab teha konksu useState abil. Selleks peaksid teil olema põhiteadmised kuidas töötada konksuga useState.

importida Reageerige, { useState } alates 'reageerida';
funktsiooniRakendus() {
 const [teema, setTheme] = useState('valgus');
tagasi (
`Rakendus ${theme}`}>
<h1>Tere, Maailm!</h1>
</div>
 );
}
eksportidavaikimisi Rakendus;

Koodilõik impordib Reactist konksu useState ja loob olekumuutuja nimega theme. Teemamuutuja jälgib rakenduse praegust teemat, mille kood määrab vaikimisi olekuks "light".

2. Lisage lülitusnupp

Järgmisena lisage rakendusele lülitusnupp, et kasutajad saaksid heleda ja tumeda režiimi vahel lülituda. Seda saab teha järgmise koodiga:

importida Reageerige, { useState } alates 'reageerida';
funktsiooniRakendus() {
 const [teema, setTheme] = useState('valgus');
konst toggleTheme = () => {
 kui (teema 'valgus') {
 setTheme('tume');
 } muidu {
 setTheme('valgus');
 }
 };
tagasi (
`Rakendus ${theme}`}>
<nupp onClick={toggleTheme}>Lülitage teema sisse</button>
<h1>Tere, Maailm!</h1>
</div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodilõik sisaldab funktsiooni toggleTheme, et muuta teema oleku muutujat hele ja tume vahel, samuti nuppu funktsiooni toggleTheme klõpsamisel kutsumiseks.

3. Kasutage useEffect Hooki

Järgmisena kasutage konksu useEffect, et dünaamiliselt värskendada rakenduse teemat teema olekumuutuja alusel.

importida Reageerida, { useState, useEffect } alates 'reageerida';
funktsiooniRakendus() {
 const [teema, setTheme] = useState('valgus');
konst toggleTheme = () => {
 kui (teema 'valgus') {
 setTheme('tume');
 } muidu {
 setTheme('valgus');
 }
 };
 useEffect(() => {
dokument.body.className = teema;
 }, [teema]);
tagasi (
`Rakendus ${theme}`}>
<nupp onClick={toggleTheme}>Lülitage teema sisse</button>
<h1>Tere, Maailm!</h1>
</div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodilõik kasutab konksu useEffect, et värskendada elemendi document.body klassiNimi teema olekumuutuja alusel. See võimaldab dünaamiliselt värskendada rakenduse CSS-i teema alusel.

4. CSS-i lisamine tumedate ja heledate režiimide jaoks

Järgmisena lisage tumedate ja heledate režiimide jaoks CSS. Seda saate teha, luues faili nimega "darkMode.css" ja lisades järgmise CSS-i:

.tume {
 taustavärv: #333;
 värv: #fff;
}
.valgus {
 taustavärv: #fff;
 värv: #333;
}

Pärast seda peate CSS-faili oma rakendusse importima. Seda saab teha järgmise koodiga:

importida Reageerida, { useState, useEffect } alates 'reageerida';
importida './darkMode.css';
funktsiooniRakendus() {
 const [teema, setTheme] = useState('valgus');
konst toggleTheme = () => {
 kui (teema 'valgus') {
 setTheme('tume');
 } muidu {
 setTheme('valgus');
 }
 };
 useEffect(() => {
dokument.body.className = teema;
 }, [teema]);
tagasi (
`Rakendus ${theme}`}>
<nupp onClick={toggleTheme}>Lülitage teema sisse</button>
<h1>Tere, Maailm!</h1>
</div>
 );
}
eksportidavaikimisi Rakendus;

5. Lülituge erinevatele režiimidele

Nüüd, kui olete lisanud tumeda ja heleda režiimi CSS-i, saate nende vahel vahetada, klõpsates lülitusnuppu. Selleks tuleb esmalt käivitada arendusserver. Seda saate teha järgmise terminali käsu käivitamisega:

npm alustada

Pärast seda saate avada rakenduse brauseris ja klõpsata lülitusnuppu, et lülituda tumeda ja heleda režiimi vahel.

Tumeda režiimi lisavalikud rakenduses React

Kui soovite, et teema püsiks kogu lehe värskendamise ajal, saate seda teha kasutage andmete salvestamiseks kohalikku Storage API-t. Selleks peate esmalt oma rakendusele lisama järgmise koodi:

importida Reageerida, { useState, useEffect } alates 'reageerida';
importida './darkMode.css';
funktsiooniRakendus() {
konst [teema, setTheme] = useState(
 localStorage.getItem('teema') || 'valgus'
 );
konst toggleTheme = () => {
 kui (teema 'valgus') {
 setTheme('tume');
 } muidu {
 setTheme('valgus');
 }
 };
 useEffect(() => {
 localStorage.setItem('teema', teema);
dokument.body.className = teema;
 }, [teema]);
tagasi (
`Rakendus ${theme}`}>
<nupp onClick={toggleTheme}>Lülitage teema sisse</button>
<h1>Tere, Maailm!</h1>
</div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodilõik sisaldab võimalust säilitada teema pärast lehe värskendamist. Seda tehakse kohaliku Storage API abil. Esiteks kontrollib see, kas kohalikus salvestusruumis on mõni teema salvestatud.

Kui on teema, siis seda teemat kasutatakse. Kui ei, siis kasutatakse heledat teemat. Järgmisena lisatakse kood konksule useEffect, et salvestada teema kohalikus salvestusruumis. See tagab, et teema püsib kogu lehe värskendamise ajal.

Tume režiim ei lõpe Reactiga

Tumeda režiimi saate oma Reacti rakendusele lisada mitmel viisil. Selles artiklis on näidatud üks viis, kuidas seda teha konksude useState ja useEffect abil. Siiski on ka palju muid viise, kuidas saate seda teha.

Näiteks saate teemapakkuja loomiseks kasutada React Context API-t. See võimaldaks teil mähkida kogu rakenduse teemapakkuja komponenti ja pääseda teemale juurde kõikjal oma rakenduses.

Samuti saate oma brauseris lubada tumeda režiimi ja kasutada CSS-i meediumipäringuid, et rakendada erinevaid stiile sõltuvalt brauseri teemast.