Nėra jokių abejonių, kad tamsusis režimas šiais laikais yra labai populiarus. Vis daugiau programų siūlo galimybę pereiti prie tamsios temos ir dėl geros priežasties. Jei norite pridėti tamsųjį režimą prie programos „React“, turite atlikti keletą dalykų. Šiame straipsnyje sužinosite, kaip įtraukti tamsųjį režimą prie programos „React“, naudojant „useState“ ir „useEffect“ kabliukus.

Kas yra tamsusis režimas?

Tamsusis režimas yra tema, kuri perjungia programos spalvų paletę iš šviesios į tamsią. Šiais laikais dauguma programų turi galimybę perjungti šviesų ir tamsų režimus. Tai gali būti naudinga tiems, kurie nori dirbti tamsioje aplinkoje, arba tiems, kuriems lengviau akims.

Kodėl naudoti tamsųjį režimą?

Yra keletas priežasčių, kodėl „React“ programoje galbūt norėsite naudoti tamsųjį režimą. Pažvelkime į keletą populiariausių.

1. Pagerinkite baterijos veikimo laiką

Vienas iš tamsaus režimo pranašumų yra tai, kad jis gali padėti pagerinti baterijos veikimo laiką įrenginiuose su OLED arba AMOLED ekranais. Taip yra todėl, kad tamsesni pikseliai reikalauja mažiau energijos.

instagram viewer

2. Sumažinti akių įtampą

Jei naršote internete ar naudojate programas naktį, tamsusis režimas gali padėti sumažinti akių nuovargį. Taip yra todėl, kad sumažėja ryškiai baltos arba mėlynos šviesos, skleidžiamos iš ekrano, kiekis.

3. Sukurkite labiau įtraukiantį potyrį

Kai kurie žmonės mano, kad tamsusis režimas sukuria labiau įtraukiantį potyrį. Tai gali būti ypač aktualu naudojant programas ar svetaines, kuriose yra daug turinio, pvz., naujienų programas ar socialinę mediją.

Kaip pridėti tamsųjį režimą prie „React“ programos

Tamsaus režimo įtraukimas į programą „React“ yra gana paprastas. Veiksmai, būtini norint įtraukti tamsųjį režimą prie programos „React“, išvardyti toliau.

Prieš pradėdami, turėsite įsitikinti, kad turite a Reagavimo programa nustatyta.

1. Naudokite „useState Hook“.

Pirmas dalykas, kurį turėsite padaryti, yra sukurti būsenos kintamąjį, kad būtų galima stebėti dabartinę programos temą. Tai galima padaryti naudojant „useState“ kabliuką. Norėdami tai padaryti, turėtumėte turėti pagrindinį supratimą kaip dirbti su useState kabliu.

importuoti Reaguoti, { useState } iš „reaguoti“;
funkcijaProgramėlė() {
 const [tema, setTheme] = useState('šviesos');
grąžinti (
„Programa ${theme}`}>
<h1>Labas pasauli!</h1>
</div>
 );
}
eksportuotinumatytas Programėlė;

Kodo fragmentas importuoja „useState“ kabliuką iš „React“ ir sukuria būsenos kintamąjį, vadinamą tema. Temos kintamasis seka dabartinę programos temą, kurią pagal numatytuosius nustatymus kodas nustato į „šviesią“.

2. Pridėti perjungimo mygtuką

Tada prie programos pridėkite perjungimo mygtuką, kad vartotojai galėtų perjungti šviesų ir tamsų režimą. Tai galima padaryti naudojant šį kodą:

importuoti Reaguoti, { useState } iš „reaguoti“;
funkcijaProgramėlė() {
 const [tema, setTheme] = useState('šviesos');
konst toggleTheme = () => {
 jei (tema 'šviesos') {
 setTheme('tamsus');
 } Kitas {
 setTheme('šviesos');
 }
 };
grąžinti (
„Programa ${theme}`}>
<mygtukas onClick={toggleTheme}>Perjungti temą</button>
<h1>Labas pasauli!</h1>
</div>
 );
}
eksportuotinumatytas Programėlė;

Aukščiau pateiktame kodo fragmente yra funkcija „toggleTheme“, skirta pakeisti temos būsenos kintamąjį tarp „šviesi“ ir „tamsi“, taip pat mygtukas, skirtas iškviesti funkciją „toggleTheme“, kai spustelėjate.

3. Naudokite „useEffect Hook“.

Tada naudokite kabliuką useEffect, kad dinamiškai atnaujintumėte programos temą pagal temos būsenos kintamąjį.

importuoti Reaguoti, { useState, useEffect } iš „reaguoti“;
funkcijaProgramėlė() {
 const [tema, setTheme] = useState('šviesos');
konst toggleTheme = () => {
 jei (tema 'šviesos') {
 setTheme('tamsus');
 } Kitas {
 setTheme('šviesos');
 }
 };
 useEffect(() => {
dokumentas.body.className = tema;
 }, [tema]);
grąžinti (
„Programa ${theme}`}>
<mygtukas onClick={toggleTheme}>Perjungti temą</button>
<h1>Labas pasauli!</h1>
</div>
 );
}
eksportuotinumatytas Programėlė;

Aukščiau pateiktame kodo fragmente naudojamas kabliukas useEffect, kad atnaujintų elemento document.body className pagal temos būsenos kintamąjį. Tai leidžia dinamiškai atnaujinti programos CSS pagal temą.

4. Tamsaus ir šviesaus režimų CSS pridėjimas

Tada pridėkite CSS, skirtą tamsiesiems ir šviesiems režimams. Tai galite padaryti sukurdami failą pavadinimu „darkMode.css“ ir pridėdami šį CSS:

.tamsu {
 fono spalva: #333;
 spalva: #fff;
}
.šviesa {
 fono spalva: #fff;
 spalva: #333;
}

Po to turėsite importuoti CSS failą į programą. Tai galima padaryti naudojant šį kodą:

importuoti Reaguoti, { useState, useEffect } iš „reaguoti“;
importuoti './darkMode.css';
funkcijaProgramėlė() {
 const [tema, setTheme] = useState('šviesos');
konst toggleTheme = () => {
 jei (tema 'šviesos') {
 setTheme('tamsus');
 } Kitas {
 setTheme('šviesos');
 }
 };
 useEffect(() => {
dokumentas.body.className = tema;
 }, [tema]);
grąžinti (
„Programa ${theme}`}>
<mygtukas onClick={toggleTheme}>Perjungti temą</button>
<h1>Labas pasauli!</h1>
</div>
 );
}
eksportuotinumatytas Programėlė;

5. Perjunkite į skirtingus režimus

Dabar, kai pridėjote tamsaus ir šviesaus režimų CSS, galite perjungti juos spustelėdami perjungimo mygtuką. Norėdami tai padaryti, pirmiausia turite paleisti kūrimo serverį. Tai galite padaryti paleisdami šią terminalo komandą:

npm pradėti

Po to galite atidaryti programą naršyklėje ir spustelėti perjungimo mygtuką, kad perjungtumėte tamsųjį ir šviesųjį režimus.

Papildomos tamsaus režimo parinktys „React“.

Jei norite, kad tema išliktų atnaujinant puslapį, galite naudokite localStorage API duomenims saugoti. Norėdami tai padaryti, pirmiausia prie programos turėsite pridėti šį kodą:

importuoti Reaguoti, { useState, useEffect } iš „reaguoti“;
importuoti './darkMode.css';
funkcijaProgramėlė() {
konst [tema, setTheme] = useState(
 localStorage.getItem('tema') || 'šviesos'
 );
konst toggleTheme = () => {
 jei (tema 'šviesos') {
 setTheme('tamsus');
 } Kitas {
 setTheme('šviesos');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
dokumentas.body.className = tema;
 }, [tema]);
grąžinti (
„Programa ${theme}`}>
<mygtukas onClick={toggleTheme}>Perjungti temą</button>
<h1>Labas pasauli!</h1>
</div>
 );
}
eksportuotinumatytas Programėlė;

Aukščiau pateiktame kodo fragmente yra galimybė išlaikyti temą po puslapio atnaujinimo. Tai atliekama naudojant „localStorage“ API. Pirma, ji patikrina, ar vietinėje saugykloje yra saugoma tema.

Jei yra tema, ji naudojama. Jei ne, naudojama „šviesi“ tema. Tada kodas pridedamas prie „useEffect“ kablio, kad tema būtų išsaugota „localStorage“. Tai užtikrina, kad tema išliks atnaujinant puslapį.

Tamsusis režimas nesibaigia React

Yra daug būdų, kaip įtraukti tamsųjį režimą į programą „React“. Šiame straipsnyje parodytas vienas iš būdų tai padaryti naudojant „useState“ ir „useEffect“ kabliukus. Tačiau yra ir daugybė kitų būdų, kaip tai padaryti.

Pavyzdžiui, norėdami sukurti temos teikėją, galite naudoti React Context API. Tai leistų apvynioti visą programą į temos teikėjo komponentą ir pasiekti temą bet kurioje programos vietoje.

Taip pat galite įjungti tamsųjį režimą savo naršyklėje ir naudoti CSS medijos užklausas, kad pritaikytumėte skirtingus stilius, atsižvelgiant į naršyklės temą.