Kuidas luua Reactis tumedat režiimi ilma Reacti konteksti kasutamata

Rakenduste jaoks on muutunud populaarseks seade, mis võimaldab lülituda tumeda ja heleda režiimi vahel. Võib-olla on see tingitud tumedate kasutajaliideste populaarsusest, võib-olla seetõttu, et rakendused muutuvad järk-järgult konfigureeritavamaks.

Reaktsiooni kontekst on lihtne viis andmete ülemaailmseks jagamiseks, kuid see võib muuta komponentide taaskasutamise keerulisemaks. Alternatiivina saate luua tumeda režiimi nupu komponendi, mis kasutab konteksti asemel konkse useEffect ja useState. See lülitab kehaelemendi andmeatribuudi, mida CSS-stiilid saavad sihtida.

Mida vajate

Selle õpetuse järgimiseks vajate järgmist.

• Teie arvutisse installitud Node'i uusim versioon.
• Põhiteadmised Reactist ja Reageeri konksud.
• Starter React projekt. Lihtsalt looge rakendus React ja oledki valmis minema.

Looge nupu komponent

Nupukomponent vastutab teema tumedast heledaks muutmise eest. Päris rakenduses võib see nupp olla Navbari komponendi osa.

Looge src-kaustas uus fail nimega Button.js ja lisage järgmine kood.

importida { useState } alates 'reageeri'
eksportidavaikimisifunktsiooniNupp() {
 const [teema, settheme] = useState("tume")
konst HandToggle = () => {
 const uusTeema = teema "valgus"? "tume": "valgus"
 seadke teema (uus teema)
 }
tagasi (
<>
<nupu klassinimi="teemaBtn" onClick={handleToggle}>
 {teema "valgus"? <ulatus>tume</span>: <ulatus>valgus</span>}
</button>
</>
 )
}

Esiteks importige Reactist konks useState(). Kasutate seda praeguse teema jälgimiseks.

Nupu komponendis lähtestage olek tumedaks. Funktsioon HandToggle() hoolitseb ümberlülitamise funktsioonide eest. See töötab iga kord, kui nuppu klõpsate.

See komponent lülitab ka nupu teksti, kui see muudab teemat.

Nupu komponendi kuvamiseks importige see rakendusse App.js.

importida Nupp alates './nupp';
funktsiooniRakendus() {
tagasi (
<div>
<Nupp/>
</div>
 );
}
eksportidavaikimisi Rakendus;

Looge CSS-stiilid

Praegusel nupul klõpsamine ei muuda rakenduse React kasutajaliidest. Selleks peate esmalt looma tumeda ja heleda režiimi CSS-stiilid.

Lisage jaotisesse App.css järgmine.

keha {
 --color-text-primary: #131616;
 --värv-tekst-sekundaarne: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 taust: var(--värv-bg-primary);
 värv: var(--värv-tekst-esmane);
üleminek: taustal 0.25skergus sisse-välja;
}
keha[andmete teema="valgus"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
keha[andmete teema="tume"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Siin määratlete andmeatribuutide abil kehaelemendi stiilid. Seal on heleda teema andmeatribuut ja tumeda teema andmete atribuut. Igal neist on erineva värviga CSS-muutujad. CSS-i andmeatribuutide kasutamine võimaldab teil stiile vastavalt andmetele vahetada. Kui kasutaja valib tumeda teema, saate määrata kehaandmete atribuudi tumedaks ja kasutajaliides muutub.

Samuti saate muuta nupuelementide stiile, et muutuda vastavalt teemale.

.teemaBtn {
 polsterdus: 10px;
 värv: var(--värv-tekst-esmane);
 taust: läbipaistev;
 piir: 1px tahke var(--värv-tekst-esmane);
 kursor: kursor;
}

Stiilide sisse- ja väljalülitamiseks muutke nupu komponenti

CSS-failis määratletud stiilide ümberlülitamiseks peate funktsioonis handleToggle() seadma kehaelemendi andmed.

Muutke failis Button.js HandToggle() järgmiselt:

konst HandToggle = () => {
 const uusTeema = teema "valgus"? "tume": "valgus"
 seadke teema (uus teema)
dokument.body.dataset.theme = teema
}

Kui klõpsate nuppu, peaks taust lülituma tumedast heledaks või heledast tumedaks. Kui aga lehte värskendate, lähtestatakse teema. Teemasätete säilitamiseks salvestage teema eelistus kohalik salvestusruum.

Püsivad kasutajaeelistused kohalikus salvestusruumis

Peaksite kasutaja eelistuse hankima kohe, kui nupu komponent renderdub. Konks useEffect() sobib selleks suurepäraselt, kuna see jookseb pärast iga renderdamist.

Enne teema toomist kohalikust salvestusruumist peate selle esmalt salvestama.

Looge failis Button.js uus funktsioon nimega storeUserPreference().

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

See funktsioon võtab argumendina vastu kasutaja eelistuse ja salvestab selle üksusena nimega teema.

Te kutsute seda funktsiooni iga kord, kui kasutaja teemat vahetab. Seega muutke funktsioon HandToggle() nii, et see näeks välja järgmine:

konst HandToggle = () => {
 const uusTeema = teema "valgus"? "tume": "valgus"
 seadke teema (uus teema)
 storeUserSetPreference (uus teema)
dokument.body.dataset.theme = teema
}

Järgmine funktsioon hangib teema kohalikust salvestusruumist:

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

Kasutate seda konksus useEffect, nii et iga kord, kui komponent renderdab, hangib see eelistuse teema värskendamiseks kohalikust salvestusruumist.

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

Kasutaja eelistuste hankimine brauseri sätetest

Veelgi parema kasutuskogemuse saamiseks võite kasutada eelistab-värviskeemi CSS-i meediumifunktsioon teema määramiseks. See peaks kajastama kasutaja süsteemiseadeid, mida nad saavad oma OS-i või brauseri kaudu juhtida. Seade võib olla hele või tume. Oma rakenduses peaksite seda sätet kontrollima kohe pärast nupu komponendi laadimist. See tähendab selle funktsiooni rakendamist konksus useEffect().

Esiteks looge funktsioon, mis hangib kasutaja eelistuse.

Lisage jaotisesse Button.js järgmine.

konst getMediaQueryPreference = () => {
 const mediaQuery = "(eelistab värvilahendust: tume)";
konst mql = aken.matchMedia (mediaQuery);
konst hasPreference = tüüp mql.vastab "tõeväärtusele";
if (hasPreference) {
 tagastada mql.matches? "tume": "valgus";
 }
};

Järgmisena muutke meediumipäringu eelistuse toomiseks konksu useEffect() ja kasutage seda, kui kohalikus salvestusruumis pole ühtegi teemat määratud.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } muidu {
 settheme (mediaQueryPreference)
 }
dokument.body.dataset.theme = teema
}, [teema])

Kui taaskäivitate rakenduse, peaks teema vastama teie süsteemi seadetele.

Reaktsioonikonteksti kasutamine tumeda režiimi sisselülitamiseks

Reacti rakenduse teema vahetamiseks saate kasutada andmeatribuute, CSS-i ja Reacti konkse.

Teine lähenemisviis tumeda režiimi käsitlemiseks Reactis on konteksti API kasutamine. Reaktsioonikontekst võimaldab teil jagada andmeid komponentide vahel, ilma et peaksite neid rekvisiite edastama. Kui kasutate seda teemade vahetamiseks, loote teemakonteksti, millele pääsete juurde kogu rakenduses. Seejärel saate sobivate stiilide rakendamiseks kasutada teema väärtust.

Kuigi see lähenemisviis töötab, on CSS-i andmeatribuutide kasutamine lihtsam.