Pre aplikácie sa stalo populárnym mať nastavenie, ktoré vám umožňuje prepínať medzi tmavým a svetlým režimom. Možno je to kvôli popularite tmavých používateľských rozhraní, možno preto, že aplikácie sa postupne stávajú konfigurovateľnejšími.
React kontext je jednoduchý spôsob globálneho zdieľania údajov, ale môže sťažiť opätovné použitie komponentov. Ako alternatívu môžete vytvoriť komponent tlačidla tmavého režimu, ktorý namiesto kontextu používa háčiky useEffect a useState. Prepne atribút údajov na prvku tela, na ktorý môžu štýly CSS zacieliť.
Čo budete potrebovať
Ak chcete pokračovať v tomto návode, budete potrebovať nasledovné:
- Najnovšia verzia Node nainštalovaná na vašom počítači.
- Základné pochopenie React a Reagovať háčiky.
- Štartovací projekt React. Len vytvorte aplikáciu React a ste pripravení ísť.
Vytvorte komponent tlačidla
Tlačidlový komponent bude zodpovedný za prepínanie témy z tmavej na svetlú. V skutočnej aplikácii môže byť toto tlačidlo súčasťou súčasti Navbar.
V priečinku src vytvorte nový súbor s názvom Button.js a pridajte nasledujúci kód.
importovať { useState } od 'reagovať'exportpredvolenáfunkciuTlačidlo() {
const [theme, settheme] = useState("tmavé")
konšt handleToggle = () => {
const newTheme = téma "svetlo"? "tmavé": "svetlo"
settheme (newTheme)
}
vrátiť (
<>
<button className="témaBtn" onClick={handleToggle}>
{téma "svetlo"? <rozpätie>tmavé</span>: <rozpätie>svetlo</span>}
</button>
</>
)
}
Najprv importujte háčik useState() z React. Budete ho používať na sledovanie aktuálnej témy.
V komponente Button inicializujte stav na tmavý. O funkcionalitu prepínania sa postará funkcia handleToggle(). Spustí sa pri každom kliknutí na tlačidlo.
Tento komponent tiež prepína text tlačidla pri zmene témy.
Ak chcete zobraziť komponent Button, importujte ho do App.js.
importovať Tlačidlo od './Button';
funkciuApp() {
vrátiť (
<div>
<Tlačidlo/>
</div>
);
}
exportpredvolená App;
Vytvorte štýly CSS
Práve teraz kliknutie na tlačidlo nezmení používateľské rozhranie aplikácie React. Najprv musíte vytvoriť štýly CSS pre tmavý a svetlý režim.
V App.css pridajte nasledujúce.
telo {
--color-text-primary: #131616;
--color-text-secondary: #ff6b00;
--color-bg-primary: #E6EDEE;
--color-bg-secondary: #7d86881c;
pozadie: var(--color-bg-primary);
farba: var(--color-text-primary);
prechod: pozadie 00,25 seasy-in-out;
}
body[data-theme="svetlo"] {
--color-text-primary: #131616;
--color-bg-primary: #E6EDEE;
}
body[data-theme="tmavé"] {
--color-text-primary: #F2F5F7;
--color-bg-primary: #0E141B;
}
Tu definujete štýly elementu body pomocou dátových atribútov. Existuje atribút údajov svetlej témy a atribút údajov tmavej témy. Každá z nich má CSS premenné s rôznymi farbami. Použitie atribútov údajov CSS vám umožní prepínať štýly podľa údajov. Ak používateľ vyberie tmavý motív, môžete nastaviť atribút údajov tela na tmavý a používateľské rozhranie sa zmení.
Môžete tiež upraviť štýly prvkov tlačidiel, ktoré sa budú meniť podľa témy.
.themeBtn {
výplň: 10px;
farba: var(--color-text-primary);
pozadie: priehľadné;
hranica: 1px pevné var(--color-text-primary);
kurzor: ukazovateľ;
}
Upravte komponent tlačidla na prepínanie štýlov
Ak chcete prepínať štýly definované v súbore CSS, budete musieť nastaviť údaje v prvku body vo funkcii handleToggle().
V Button.js upravte handleToggle() takto:
konšt handleToggle = () => {
const newTheme = téma "svetlo"? "tmavé": "svetlo"
settheme (newTheme)
dokument.body.dataset.theme = téma
}
Ak kliknete na tlačidlo, pozadie by sa malo prepnúť z tmavého na svetlé alebo zo svetlého na tmavé. Ak však stránku obnovíte, téma sa resetuje. Ak chcete zachovať nastavenie témy, uložte predvoľbu témy do lokálny obchod.
Pretrvávajúce používateľské preferencie v lokálnom úložisku
Užívateľské preferencie by ste mali získať hneď po vykreslení komponentu Button. Hák useEffect() je na to ideálny, pretože sa spúšťa po každom vykreslení.
Pred načítaním témy z lokálneho úložiska ju musíte najskôr uložiť.
Vytvorte novú funkciu s názvom storeUserPreference() v súbore Button.js.
konšt storeUserSetPreference = (pref) => {
localStorage.setItem("tému", pref);
};
Táto funkcia prijíma užívateľské preferencie ako argument a ukladá ich ako položku s názvom téma.
Túto funkciu zavoláte vždy, keď používateľ prepne tému. Takže upravte funkciu handleToggle() tak, aby vyzerala takto:
konšt handleToggle = () => {
const newTheme = téma "svetlo"? "tmavé": "svetlo"
settheme (newTheme)
storeUserSetPreference (newTheme)
dokument.body.dataset.theme = téma
}
Nasledujúca funkcia načíta tému z lokálneho úložiska:
konšt getUserSetPreference = () => {
return localStorage.getItem("tému");
};
Budete ho používať v háku useEffect, takže zakaždým, keď sa komponent vykreslí, získa preferenciu z lokálneho úložiska na aktualizáciu témy.
useEffect(() => {
konšt userSetPreference = getUserSetPreference();
if (userSetPreference) {
settheme (userSetPreference)
}
dokument.body.dataset.theme = téma
}, [téma])
Získanie používateľských preferencií z nastavení prehliadača
Pre ešte lepšiu používateľskú skúsenosť môžete použiť preferuje-farebnú schému Funkcia médií CSS na nastavenie témy. Malo by to odrážať systémové nastavenia používateľa, ktoré môže ovládať prostredníctvom operačného systému alebo prehliadača. Nastavenie môže byť svetlé alebo tmavé. Vo vašej aplikácii budete musieť toto nastavenie skontrolovať ihneď po načítaní komponentu tlačidla. To znamená implementáciu tejto funkcie v háku useEffect().
Najprv vytvorte funkciu, ktorá načíta preferencie používateľa.
V Button.js pridajte nasledujúce.
konšt getMediaQueryPreference = () => {
const mediaQuery = "(preferuje farebnú schému: tmavú)";
konšt mql = okno.matchMedia (mediaQuery);
konšt máPreference = Typ mql.matches "boolean";
if (hasPreference) {
vrátiť mql.matches? "tmavé": "svetlo";
}
};
Ďalej upravte háčik useEffect() na získanie preferencie mediálneho dotazu a použite ho, ak v lokálnom úložisku nie je nastavená žiadna téma.
useEffect(() => {
konšt userSetPreference = getUserSetPreference();
konšt mediaQueryPreference = getMediaQueryPreference();if (userSetPreference) {
settheme (userSetPreference)
} inak {
settheme (mediaQueryPreference)
}
dokument.body.dataset.theme = téma
}, [téma])
Ak aplikáciu reštartujete, téma by sa mala zhodovať s nastaveniami vášho systému.
Pomocou kontextu reakcie na prepnutie tmavého režimu
Na prepínanie témy aplikácie React môžete použiť dátové atribúty, CSS a háky React.
Ďalším prístupom k spracovaniu tmavého režimu v React je použitie kontextového API. React kontext vám umožňuje zdieľať údaje medzi komponentmi bez toho, aby ste ich museli odovzdávať cez rekvizity. Keď ho použijete na prepínanie tém, vytvoríte kontext témy, ku ktorému máte prístup v celej aplikácii. Potom môžete použiť hodnotu témy na použitie zodpovedajúcich štýlov.
Aj keď tento prístup funguje, používanie atribútov údajov CSS je jednoduchšie.
