Za aplikacije je postalo priljubljeno, da imajo nastavitev, ki omogoča preklapljanje med temnim in svetlim načinom. Morda je to posledica priljubljenosti temnih uporabniških vmesnikov, morda zato, ker aplikacije postopoma postajajo bolj nastavljive.

Kontekst React je preprost način za globalno skupno rabo podatkov, vendar lahko oteži ponovno uporabo komponente. Kot alternativo lahko zgradite komponento gumba za temni način, ki uporablja kljuki useEffect in useState namesto konteksta. Preklopil bo atribut podatkov na elementu telesa, na katerega lahko ciljajo slogi CSS.

Kaj boste potrebovali

Če želite slediti tej vadnici, potrebujete naslednje:

  • Najnovejša različica programa Node je nameščena na vašem računalniku.
  • Osnovno razumevanje React in React kljuke.
  • Začetni projekt React. Samo ustvarite aplikacijo React in pripravljeni ste na odhod.

Ustvarite komponento gumba

Komponenta gumba bo odgovorna za preklop teme iz temne v svetlo. V resnični aplikaciji je ta gumb lahko del komponente Navbar.

instagram viewer

V mapi src ustvarite novo datoteko z imenom Button.js in dodajte naslednjo kodo.

uvoz {useState} od 'reagirati'
izvozprivzetofunkcijoGumb() {
 const [tema, settheme] = useState("temno")
konst handleToggle = () => {
 const novaTema = tema "svetloba"? "temno": "svetloba"
 settheme (nova tema)
 }
vrnitev (
<>
<gumb className="themeBtn" onClick={handleToggle}>
 {tema "svetloba"? <razpon>temno</span>: <razpon>svetloba</span>}
</button>
</>
 )
}

Najprej uvozite kljuko useState() iz Reacta. Uporabili ga boste za spremljanje trenutne teme.

V komponenti Button inicializirajte stanje na temno. Funkcija handleToggle() bo poskrbela za funkcijo preklapljanja. Zažene se vsakič, ko kliknete gumb.

Ta komponenta tudi preklopi besedilo gumba, ko spremeni temo.

Za prikaz komponente Button jo uvozite v App.js.

uvoz Gumb od './Gumb';
funkcijoaplikacija() {
vrnitev (
<div>
<Gumb/>
</div>
 );
}
izvozprivzeto aplikacija;

Ustvarite sloge CSS

Trenutno klik na gumb ne spremeni uporabniškega vmesnika aplikacije React. Za to boste morali najprej ustvariti sloge CSS za temen in svetel način.

V App.css dodajte naslednje.

telo {
 --color-text-primary: #131616;
 --color-text-secondary: #ff6b00;
 --color-bg-primarni: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 ozadje: var(--barva-bg-primarna);
 barva: var(--color-text-primary);
prehod: ozadje 0.25sease-in-out;
}
telo[podatki-tema="svetloba"] {
 --color-text-primary: #131616;
 --color-bg-primarni: #E6EDEE;
}
telo[podatki-tema="temno"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primarni: #0E141B;
}

Tukaj definirate sloge elementa telesa z uporabo podatkovnih atributov. Obstajata atribut podatkov svetle teme in atribut podatkov temne teme. Vsak od njih ima spremenljivke CSS z različnimi barvami. Uporaba atributov podatkov CSS vam bo omogočila zamenjavo slogov glede na podatke. Če uporabnik izbere temno temo, lahko atribut podatkov telesa nastavite na temno in uporabniški vmesnik se bo spremenil.

Spremenite lahko tudi sloge elementov gumbov, da se spreminjajo s temo.

.themeBtn {
 oblazinjenje: 10px;
 barva: var(--color-text-primary);
 ozadje: prozorno;
 meja: 1px trdna var(--color-text-primary);
 kazalec: kazalec;
}

Spremenite komponento gumba za preklop slogov

Če želite preklapljati med slogi, definiranimi v datoteki CSS, boste morali nastaviti podatke v elementu body v funkciji handleToggle().

V Button.js spremenite handleToggle() takole:

konst handleToggle = () => {
 const novaTema = tema "svetloba"? "temno": "svetloba"
 settheme (nova tema)
dokument.body.dataset.theme = tema
}

Če kliknete na gumb, se mora ozadje preklopiti iz temnega v svetlo ali svetlega v temno. Če pa stran osvežite, se tema ponastavi. Če želite obdržati nastavitev teme, shranite nastavitev teme v lokalno shranjevanje.

Trajanje uporabniških nastavitev v lokalni shrambi

Uporabniške nastavitve bi morali pridobiti takoj, ko se komponenta Button upodobi. Kavelj useEffect() je popoln za to, saj se zažene po vsakem upodabljanju.

Preden temo pridobite iz lokalnega pomnilnika, jo morate najprej shraniti.

Ustvarite novo funkcijo z imenom storeUserPreference() v Button.js.

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

Ta funkcija prejme uporabniško preferenco kot argument in jo shrani kot element, imenovan tema.

To funkcijo boste poklicali vsakič, ko uporabnik preklopi temo. Torej spremenite funkcijo handleToggle(), da bo videti takole:

konst handleToggle = () => {
 const novaTema = tema "svetloba"? "temno": "svetloba"
 settheme (nova tema)
 storeUserSetPreference (nova tema)
dokument.body.dataset.theme = tema
}

Naslednja funkcija pridobi temo iz lokalnega pomnilnika:

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

Uporabili ga boste v kavlju useEffect, tako da komponenta vsakič, ko se upodablja, pridobi prednost iz lokalnega pomnilnika za posodobitev teme.

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

Pridobivanje uporabniških nastavitev iz nastavitev brskalnika

Za še boljšo uporabniško izkušnjo lahko uporabite raje-barvna-shema Medijska funkcija CSS za nastavitev teme. To bi moralo odražati uporabnikove sistemske nastavitve, ki jih lahko nadzira prek operacijskega sistema ali brskalnika. Nastavitev je lahko svetla ali temna. V vaši aplikaciji bi morali to nastavitev preveriti takoj po nalaganju komponente gumba. To pomeni implementacijo te funkcionalnosti v kavelj useEffect().

Najprej ustvarite funkcijo, ki pridobi uporabniške nastavitve.

V Button.js dodajte naslednje.

konst getMediaQueryPreference = () => {
 const mediaQuery = "(prednostna-barvna-shema: temna)";
konst mql = okno.matchMedia (mediaQuery);
konst hasPreference = tip mql.ujema se z "boolean";
if (hasPreference) {
 vrni mql.matches? "temno": "svetloba";
 }
};

Nato spremenite kljuko useEffect(), da pridobite preference medijske poizvedbe in jo uporabite, če v lokalnem pomnilniku ni nastavljena nobena tema.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } drugače {
 settheme (mediaQueryPreference)
 }
dokument.body.dataset.theme = tema
}, [tema])

Če znova zaženete aplikacijo, se mora tema ujemati z nastavitvami vašega sistema.

Uporaba konteksta React za preklop temnega načina

Za preklop teme aplikacije React lahko uporabite atribute podatkov, CSS in kljuke React.

Drug pristop k upravljanju temnega načina v Reactu je uporaba kontekstnega API-ja. Kontekst React vam omogoča skupno rabo podatkov med komponentami, ne da bi jih morali posredovati skozi rekvizite. Ko ga uporabljate za preklapljanje med temami, ustvarite kontekst teme, do katerega lahko dostopate v celotni aplikaciji. Nato lahko uporabite vrednost teme za uporabo ujemajočih se slogov.

Čeprav ta pristop deluje, je uporaba podatkovnih atributov CSS preprostejša.