Ir kļuvis populārs, ka lietojumprogrammām ir iestatījums, kas ļauj pārslēgties starp tumšo un gaišo režīmu. Varbūt tas ir saistīts ar tumšo lietotāja interfeisu popularitāti, varbūt tāpēc, ka lietotnes pakāpeniski kļūst konfigurējamākas.

React konteksts ir vienkāršs veids, kā koplietot datus visā pasaulē, taču tas var apgrūtināt komponentu atkārtotu izmantošanu. Kā alternatīvu varat izveidot tumšā režīma pogas komponentu, kas konteksta vietā izmanto useEffect un useState āķus. Tas pārslēgs pamatelementa datu atribūtu, uz kuru var atlasīt CSS stilus.

Kas jums būs nepieciešams

Lai sekotu šai apmācībai, jums būs nepieciešams:

  • Jūsu datorā instalēta jaunākā Node versija.
  • Pamata izpratne par React un Reaģēt āķi.
  • Iesācēja React projekts. Vienkārši izveidot React lietotni un esat gatavs doties.

Izveidojiet pogas komponentu

Pogas komponents būs atbildīgs par motīva pārslēgšanu no tumšas uz gaišu. Reālā lietojumprogrammā šī poga var būt daļa no Navbar komponenta.

Mapē src izveidojiet jaunu failu Button.js un pievienojiet šādu kodu.

instagram viewer 
imports { useState } no 'reaģēt'
eksportētnoklusējumafunkcijuPoga() {
 const [theme, settheme] = useState("tumšs")
konst handToggle = () => {
 const newTheme = tēma "gaismas"? "tumšs": "gaismas"
 iestatīt tēmu (jauna tēma)
 }
atgriezties (
<>
<poga klasesNosaukums="tēmaBtn" onClick={handleToggle}>
 {tēma "gaismas"? <span>tumšs</span>: <span>gaismas</span>}
</button>
</>
 )
}

Pirmkārt, importējiet āķi useState() no React. Jūs to izmantosit, lai izsekotu pašreizējai tēmai.

Komponentā Button inicializējiet stāvokli uz tumšu. HandToggle() funkcija parūpēsies par pārslēgšanas funkcionalitāti. Tas darbojas katru reizi, kad tiek noklikšķināts uz pogas.

Šis komponents arī pārslēdz pogas tekstu, mainot motīvu.

Lai parādītu komponentu Button, importējiet to programmā App.js.

imports Poga no './poga';
funkcijuApp() {
atgriezties (
<div>
<Poga/>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Izveidojiet CSS stilus

Šobrīd, noklikšķinot uz pogas, React lietotnes lietotāja interfeiss netiek mainīts. Lai to izdarītu, vispirms ir jāizveido CSS stili tumšajam un gaišajam režīmam.

Vietnē App.css pievienojiet tālāk norādīto.

body {
 --color-text-primary: #131616;
 --krāsa-teksts-sekundārais: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 fons: var(--krāsa-bg-primary);
 krāsa: var(--krāsa-teksts-primary);
pāreja: fons 0.25svieglums iekšā-out;
}
korpuss[datu tēma="gaismas"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
korpuss[datu tēma="tumšs"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Šeit jūs definējat ķermeņa elementa stilus, izmantojot datu atribūtus. Ir gaišās tēmas datu atribūts un tumšās tēmas datu atribūts. Katram no tiem ir CSS mainīgie ar dažādām krāsām. Izmantojot CSS datu atribūtus, varēsiet pārslēgt stilus atbilstoši datiem. Ja lietotājs izvēlas tumšu motīvu, ķermeņa datu atribūtam varat iestatīt tumšu, un lietotāja interfeiss mainīsies.

Varat arī modificēt pogu elementu stilus, lai tie mainītos atbilstoši motīvam.

.themeBtn {
 polsterējums: 10 pikseļi;
 krāsa: var(--krāsa-teksts-primary);
 fons: caurspīdīgs;
 robeža: 1px ciets var(--krāsa-teksts-primary);
 kursors: rādītājs;
}

Modificēt pogas komponentu, lai pārslēgtu stilus

Lai pārslēgtu CSS failā definētos stilus, funkcijā handleToggle() būs jāiestata dati ķermeņa elementā.

Programmā Button.js mainiet handToggle() šādi:

konst handToggle = () => {
 const newTheme = tēma "gaismas"? "tumšs": "gaismas"
 iestatīt tēmu (jauna tēma)
dokumentu.body.dataset.theme = tēma
}

Noklikšķinot uz pogas, fonam vajadzētu pārslēgties no tumša uz gaišu vai gaišu uz tumšu. Tomēr, ja atsvaidzināt lapu, motīvs tiek atiestatīts. Lai saglabātu motīva iestatījumu, saglabājiet motīva preferenci vietējā krātuve.

Pastāvīgās lietotāja preferences vietējā krātuvē

Jums vajadzētu izgūt lietotāja preferences, tiklīdz tiek atveidots komponents Button. Āķis useEffect() ir lieliski piemērots šim nolūkam, jo ​​tas darbojas pēc katras renderēšanas.

Pirms motīva izgūšanas no vietējās krātuves tas vispirms ir jāsaglabā.

Izveidojiet jaunu funkciju ar nosaukumu storeUserPreference() failā Button.js.

konst storeUserSetPreference = (pref) => {
 localStorage.setItem("tēma", pref);
};

Šī funkcija saņem lietotāja izvēli kā argumentu un saglabā to kā vienumu, ko sauc par motīvu.

Šī funkcija tiks izsaukta katru reizi, kad lietotājs pārslēgs motīvu. Tātad, modificējiet HandToggle() funkciju, lai tā izskatītos šādi:

konst handToggle = () => {
 const newTheme = tēma "gaismas"? "tumšs": "gaismas"
 iestatīt tēmu (jauna tēma)
 storeUserSetPreference (jauna tēma)
dokumentu.body.dataset.theme = tēma
}

Šī funkcija izgūst motīvu no vietējās krātuves:

konst getUserSetPreference = () => {
 return localStorage.getItem("tēma");
};

Jūs to izmantosit āķī useEffect, tāpēc katru reizi, kad komponents tiek renderēts, tas ienes preferenci no vietējās krātuves, lai atjauninātu motīvu.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
dokumentu.body.dataset.theme = tēma
}, [tēma])

Lietotāja preferenču iegūšana pārlūkprogrammas iestatījumos

Lai nodrošinātu vēl labāku lietotāja pieredzi, varat izmantot dod priekšroku krāsu shēmai CSS multivides funkcija, lai iestatītu motīvu. Tam ir jāatspoguļo lietotāja sistēmas iestatījumi, kurus viņš var kontrolēt, izmantojot savu OS vai pārlūkprogrammu. Iestatījums var būt gaišs vai tumšs. Lietojumprogrammā šis iestatījums ir jāpārbauda tūlīt pēc pogas komponenta ielādes. Tas nozīmē šīs funkcionalitātes ieviešanu useEffect() āķī.

Vispirms izveidojiet funkciju, kas izgūst lietotāja preferences.

Vietnē Button.js pievienojiet tālāk norādīto.

konst getMediaQueryPreference = () => {
 const mediaQuery = "(dod priekšroku krāsu shēmai: tumša)";
konst mql = logs.matchMedia (mediaQuery);
konst hasPreference = veids mql.matches "būla";
if (hasPreference) {
 atgriezt mql.matches? "tumšs": "gaismas";
 }
};

Pēc tam modificējiet āķi useEffect(), lai izgūtu multivides vaicājuma preferences un izmantotu to, ja lokālajā krātuvē nav iestatīts neviens motīvs.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } cits {
 iestatīt tēmu (mediaQueryPreference)
 }
dokumentu.body.dataset.theme = tēma
}, [tēma])

Ja restartējat lietojumprogrammu, motīvam ir jāatbilst jūsu sistēmas iestatījumiem.

Reakcijas konteksta izmantošana, lai pārslēgtu tumšo režīmu

Varat izmantot datu atribūtus, CSS un React āķus, lai pārslēgtu React lietojumprogrammas motīvu.

Vēl viena pieeja tumšā režīma apstrādei programmā React ir konteksta API izmantošana. React konteksts ļauj koplietot datus starp komponentiem, nenododot tos caur rekvizītiem. Izmantojot to, lai pārslēgtu motīvus, jūs izveidojat motīvu kontekstu, kuram varat piekļūt visā lietojumprogrammā. Pēc tam varat izmantot motīva vērtību, lai lietotu atbilstošus stilus.

Lai gan šī pieeja darbojas, CSS datu atribūtu izmantošana ir vienkāršāka.