Išpopuliarėjo programose turėti nustatymą, leidžiantį perjungti tamsius ir šviesius režimus. Galbūt taip yra dėl tamsių vartotojo sąsajų populiarumo, galbūt todėl, kad programos palaipsniui tampa konfigūruojamos.

React kontekstas yra paprastas būdas dalytis duomenimis visame pasaulyje, tačiau dėl to komponentų pakartotinis naudojimas gali būti sudėtingesnis. Kaip alternatyvą galite sukurti tamsaus režimo mygtuko komponentą, kuris naudoja "useEffect" ir "useState" kabliukus, o ne kontekstą. Tai perjungs duomenų atributą kūno elemente, kuriam gali būti taikomi CSS stiliai.

Ko Jums prireiks

Jei norite tęsti šią mokymo programą, jums reikės šių dalykų:

  • Jūsų kompiuteryje įdiegta naujausia Node versija.
  • Pagrindinis supratimas apie React ir Reaguoti kabliukai.
  • Pradedantis „React“ projektas. Tiesiog sukurti programą „React“. ir jūs pasiruošę eiti.

Sukurkite mygtuko komponentą

Mygtuko komponentas bus atsakingas už temos perjungimą iš tamsios į šviesią. Realioje programoje šis mygtukas gali būti Navbar komponento dalis.

instagram viewer

Aplanke src sukurkite naują failą pavadinimu Button.js ir pridėkite šį kodą.

importuoti { useState } iš 'reaguoti'
eksportuotinumatytasfunkcijaMygtukas() {
 const [tema, settheme] = useState("tamsus")
konst handToggle = () => {
 const newTema = tema "šviesos"? "tamsus": "šviesos"
 nustatyti temą (nauja tema)
 }
grąžinti (
<>
<mygtukas className="temaBtn" onClick={handleToggle}>
 {tema "šviesos"? <span>tamsus</span>: <span>šviesos</span>}
</button>
</>
 )
}

Pirmiausia importuokite „useState()“ kabliuką iš „React“. Ją naudosite norėdami sekti esamą temą.

Komponente Mygtukas nustatykite tamsų būseną. HandToggle() funkcija pasirūpins perjungimo funkcija. Jis veikia kiekvieną kartą, kai paspaudžiamas mygtukas.

Šis komponentas taip pat perjungia mygtuko tekstą, kai keičia temą.

Norėdami parodyti mygtuko komponentą, importuokite jį į App.js.

importuoti Mygtukas iš './mygtukas';
funkcijaProgramėlė() {
grąžinti (
<div>
<Mygtukas/>
</div>
 );
}
eksportuotinumatytas Programėlė;

Sukurkite CSS stilius

Šiuo metu spustelėjus mygtuką „React“ programos vartotojo sąsaja nepasikeičia. Tam pirmiausia turėsite sukurti tamsaus ir šviesaus režimo CSS stilius.

Prie App.css pridėkite toliau nurodytus dalykus.

kūnas {
 --color-text-primary: #131616;
 --spalva-tekstas-antrinė: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 fonas: var(--spalva-bg-pirminis);
 spalva: var(--spalva-tekstas-pirminis);
perėjimas: fone 0.25slengvumas į išorę;
}
body[duomenų tema="šviesos"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
body[duomenų tema="tamsus"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Čia apibrėžiate kūno elemento stilius naudodami duomenų atributus. Yra šviesios temos duomenų atributas ir tamsiosios temos duomenų atributas. Kiekvienas iš jų turi skirtingų spalvų CSS kintamuosius. Naudodami CSS duomenų atributus galėsite keisti stilius pagal duomenis. Jei vartotojas pasirenka tamsią temą, kūno duomenų atributą galite nustatyti į tamsią ir vartotojo sąsaja pasikeis.

Taip pat galite keisti mygtukų elementų stilius, kad jie keistųsi atsižvelgiant į temą.

.temaBtn {
 pamušalas: 10px;
 spalva: var(--spalva-tekstas-pirminis);
 fonas: skaidrus;
 kraštinė: 1px kietas var(--spalva-tekstas-pirminis);
 žymeklis: rodyklė;
}

Modifikuokite mygtuko komponentą, kad perjungtumėte stilius

Norėdami perjungti CSS faile apibrėžtus stilius, funkcijoje handleToggle() turėsite nustatyti kūno elemento duomenis.

Button.js modifikuokite handleToggle() taip:

konst handToggle = () => {
 const newTema = tema "šviesos"? "tamsus": "šviesos"
 nustatyti temą (nauja tema)
dokumentas.body.dataset.theme = tema
}

Jei spustelėsite mygtuką, fonas turėtų persijungti iš tamsaus į šviesų arba šviesų į tamsų. Tačiau jei atnaujinsite puslapį, tema bus nustatyta iš naujo. Norėdami išlaikyti temos nustatymą, išsaugokite temos nuostatą vietinė parduotuvė.

Vietinėje saugykloje išliekanti vartotojo nuostata

Turėtumėte gauti vartotojo nuostatas, kai tik pasirodys mygtuko komponentas. Kabliukas useEffect() puikiai tinka tam, nes jis paleidžiamas po kiekvieno atvaizdavimo.

Prieš nuskaitydami temą iš vietinės saugyklos, pirmiausia turite ją išsaugoti.

Button.js sukurkite naują funkciją, pavadintą storeUserPreference().

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

Ši funkcija gauna vartotojo pasirinkimą kaip argumentą ir išsaugo jį kaip elementą, vadinamą tema.

Šią funkciją iškviesite kiekvieną kartą, kai vartotojas perjungs temą. Taigi, pakeiskite HandToggle() funkciją, kad atrodytų taip:

konst handToggle = () => {
 const newTema = tema "šviesos"? "tamsus": "šviesos"
 nustatyti temą (nauja tema)
 storeUserSetPreference (nauja tema)
dokumentas.body.dataset.theme = tema
}

Ši funkcija nuskaito temą iš vietinės saugyklos:

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

Naudosite jį „useEffect Hook“, todėl kiekvieną kartą, kai komponentas atvaizduojamas, jis paima pirmenybę iš vietinės saugyklos, kad būtų atnaujinta tema.

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

Vartotojo nuostatų gavimas iš naršyklės nustatymų

Norėdami gauti dar geresnę vartotojo patirtį, galite naudoti teikia pirmenybę spalvų schemai CSS medijos funkcija temai nustatyti. Tai turėtų atspindėti vartotojo sistemos nustatymus, kuriuos jis gali valdyti per savo OS arba naršyklę. Nustatymas gali būti šviesus arba tamsus. Programoje šį nustatymą turėsite patikrinti iškart po to, kai įkeliamas mygtuko komponentas. Tai reiškia, kad ši funkcija turi būti įdiegta „useEffect() hook“.

Pirmiausia sukurkite funkciją, kuri nuskaito vartotojo nuostatas.

Prie Button.js pridėkite toliau nurodytus dalykus.

konst getMediaQueryPreference = () => {
 const mediaQuery = "(renkasi spalvų schemą: tamsią)";
konst mql = langas.matchMedia (mediaQuery);
konst hasPreference = tipas mql.atitinka "bulio";
if (hasPreference) {
 grąžinti mql.matches? "tamsus": "šviesos";
 }
};

Tada pakeiskite kabliuką useEffect(), kad gautumėte medijos užklausos nuostatas ir naudokite ją, jei vietinėje saugykloje nenustatyta jokia tema.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } Kitas {
 nustatyti temą (mediaQueryPreference)
 }
dokumentas.body.dataset.theme = tema
}, [tema])

Jei iš naujo paleisite programą, tema turėtų atitikti jūsų sistemos nustatymus.

Reakcijos konteksto naudojimas tamsaus režimo perjungimui

Galite naudoti duomenų atributus, CSS ir „React“ kabliukus, kad perjungtumėte „React“ programos temą.

Kitas būdas valdyti tamsųjį režimą „React“ yra kontekstinės API naudojimas. React kontekstas leidžia dalytis duomenimis tarp komponentų neperduodant jų per rekvizitus. Naudodami jį temoms perjungti, sukuriate temos kontekstą, kurį galite pasiekti visoje programoje. Tada galite naudoti temos reikšmę, kad pritaikytumėte atitinkančius stilius.

Nors šis metodas veikia, naudoti CSS duomenų atributus yra paprasčiau.