Az alkalmazások körében népszerűvé vált, hogy olyan beállítással rendelkeznek, amely lehetővé teszi a sötét és a világos mód közötti váltást. Talán a sötét felhasználói felületek népszerűségének köszönhető, talán azért, mert az alkalmazások fokozatosan konfigurálhatóbbá válnak.

A React Context egy egyszerű módja az adatok globális megosztásának, de megnehezítheti az összetevők újrafelhasználását. Alternatív megoldásként létrehozhat egy sötét módú gombösszetevőt, amely a useEffect és a useState horgokat használja kontextus helyett. Ez átkapcsol egy adatattribútumot a törzselemen, amelyet a CSS-stílusok megcélozhatnak.

Amire szüksége lesz

Az oktatóanyag követéséhez a következőkre lesz szüksége:

  • A Node legújabb verziója telepítve a gépére.
  • A React és a Reagálás horgok.
  • Kezdő React projekt. Éppen hozzon létre egy React alkalmazást és készen állsz az indulásra.

Hozzon létre egy gombkomponenst

A gomb komponens felelős a téma sötétről világosra váltásáért. Valódi alkalmazásban ez a gomb a Navbar összetevő része lehet.

instagram viewer

Az src mappában hozzon létre egy új fájlt Button.js néven, és adja hozzá a következő kódot.

import { useState } tól től 'reagál'
exportalapértelmezettfunkcióGomb() {
 const [téma, settheme] = useState("sötét")
const handleToggle = () => {
 const newTheme = téma "könnyű"? "sötét": "könnyű"
 settheme (új téma)
 }
Visszatérés (
<>
<gomb className="témaBtn" onClick={handleToggle}>
 {téma "könnyű"? <span>sötét</span>: <span>könnyű</span>}
</button>
</>
 )
}

Először importálja a useState() hookot a Reactból. Ezzel nyomon követheti az aktuális témát.

A Button komponensben állítsa be az állapotot sötétre. A handleToggle() függvény gondoskodik a váltás funkcióról. Minden alkalommal lefut, amikor a gombra kattintanak.

Ez az összetevő a gomb szövegét is átkapcsolja, ha módosítja a témát.

A Button összetevő megjelenítéséhez importálja azt az App.js programba.

import Gomb tól től './Gomb';
funkcióApp() {
Visszatérés (
<div>
<Gomb/>
</div>
 );
}
exportalapértelmezett App;

Hozza létre a CSS-stílusokat

Jelenleg a gombra kattintva nem változik meg a React alkalmazás felhasználói felülete. Ehhez először létre kell hoznia a CSS-stílusokat a sötét és világos módhoz.

Az App.css fájlban adja hozzá a következőket.

body {
 --color-text-primary: #131616;
 --szín-szöveg-másodlagos: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 háttér: var(--szín-bg-elsődleges);
 szín: var(--szín-szöveg-elsődleges);
átmenet: háttér 0.25skönnyedség be-ki;
}
body[adattéma="könnyű"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
body[adattéma="sötét"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Itt adatattribútumok segítségével határozza meg a törzselem stílusait. Van a világos téma adatattribútum és a sötét téma adatattribútum. Mindegyikhez különböző színű CSS-változók tartoznak. A CSS-adatattribútumok használatával a stílusok az adatoknak megfelelően válthatók. Ha a felhasználó sötét témát választ, a body data attribútumot sötétre állíthatja, és a felhasználói felület megváltozik.

A gombelemstílusokat is módosíthatja, hogy a témával együtt változzanak.

.themeBtn {
 padding: 10px;
 szín: var(--szín-szöveg-elsődleges);
 háttér: átlátszó;
 határ: 1px tömör var(--szín-szöveg-elsődleges);
 kurzor: mutató;
}

Módosítsa a gomb komponensét a stílusok váltásához

A CSS-fájlban meghatározott stílusok váltásához be kell állítania az adatokat a body elemben a handleToggle() függvényben.

A Button.js fájlban módosítsa a handleToggle() függvényt a következőképpen:

const handleToggle = () => {
 const newTheme = téma "könnyű"? "sötét": "könnyű"
 settheme (új téma)
dokumentum.body.dataset.theme = téma
}

Ha a gombra kattint, a háttérnek sötétről világosra vagy világosról sötétre kell váltania. Ha azonban frissíti az oldalt, a téma visszaáll. A témabeállítás megőrzéséhez mentse el a témabeállítást helyi raktár.

Folyamatos felhasználói preferenciák a helyi tárhelyen

A felhasználói beállításokat azonnal le kell kérnie, amint a Button összetevő megjelenik. A useEffect() hook tökéletes erre, mivel minden renderelés után lefut.

Mielőtt lekérné a témát a helyi tárhelyről, először tárolnia kell.

Hozzon létre egy storeUserPreference() nevű függvényt a Button.js fájlban.

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

Ez a függvény argumentumként fogadja a felhasználói preferenciákat, és egy téma nevű elemként tárolja.

Ezt a függvényt minden alkalommal meg fogja hívni, amikor a felhasználó váltja a témát. Tehát módosítsa a handleToggle() függvényt, hogy így nézzen ki:

const handleToggle = () => {
 const newTheme = téma "könnyű"? "sötét": "könnyű"
 settheme (új téma)
 storeUserSetPreference (új téma)
dokumentum.body.dataset.theme = téma
}

A következő függvény lekéri a témát a helyi tárhelyről:

const getUserSetPreference = () => {
 return localStorage.getItem("téma");
};

A useEffect hook-ban fogja használni, így minden alkalommal, amikor az összetevő megjelenik, lekéri a preferenciát a helyi tárhelyről a téma frissítéséhez.

useEffect(() => {
const userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
dokumentum.body.dataset.theme = téma
}, [téma])

Felhasználói beállítások lekérése a böngésző beállításaiból

A még jobb felhasználói élmény érdekében használhatja a színsémát preferál CSS média funkció a téma beállításához. Ennek tükröznie kell a felhasználó rendszerbeállításait, amelyeket az operációs rendszerén vagy a böngészőjén keresztül vezérelhet. A beállítás lehet világos vagy sötét. Az alkalmazásban azonnal ellenőriznie kell ezt a beállítást a gombösszetevő betöltése után. Ez azt jelenti, hogy ezt a funkciót a useEffect() hook-ban kell megvalósítani.

Először hozzon létre egy függvényt, amely lekéri a felhasználói beállításokat.

A Button.js fájlban adja hozzá a következőket.

const getMediaQueryPreference = () => {
 const mediaQuery = "(színsémát preferál: sötét)";
const mql = ablak.matchMedia (mediaQuery);
const hasPreference = típusú mql.egyezik "boolean";
if (hasPreference) {
 visszaküldi az mql.matches-t? "sötét": "könnyű";
 }
};

Ezután módosítsa a useEffect() hookot a médialekérdezési beállítások lekéréséhez, és használja azt, ha nincs téma beállítva a helyi tárolóban.

useEffect(() => {
const userSetPreference = getUserSetPreference();
const mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } más {
 settheme (mediaQueryPreference)
 }
dokumentum.body.dataset.theme = téma
}, [téma])

Ha újraindítja az alkalmazást, a témának meg kell egyeznie a rendszer beállításaival.

A React Context használata a sötét mód átváltására

Használhat adatattribútumokat, CSS-t és React-horogokat a React-alkalmazások témájának váltásához.

A sötét mód kezelésének másik módja a Reactban a környezeti API használata. A React-kontextus lehetővé teszi az adatok megosztását az összetevők között anélkül, hogy azokat a kellékeken keresztül kellene továbbadnia. Ha a témák váltására használja, létrehoz egy témakörnyezetet, amelyhez az egész alkalmazásban hozzáférhet. Ezután használhatja a téma értékét a megfelelő stílusok alkalmazására.

Bár ez a megközelítés működik, a CSS-adatattribútumok használata egyszerűbb.