U aplikací se stalo populární mít nastavení, které vám umožní přepínat mezi tmavým a světlým režimem. Možná je to kvůli popularitě tmavých uživatelských rozhraní, možná proto, že aplikace se postupně stávají konfigurovatelnějšími.
React kontext je snadný způsob globálního sdílení dat, ale může ztížit opětovné použití komponent. Alternativně můžete vytvořit komponentu tlačítka tmavého režimu, která místo kontextu používá háčky useEffect a useState. Přepne datový atribut na prvku body, na který mohou styly CSS cílit.
Co budete potřebovat
Abyste mohli pokračovat v tomto tutoriálu, budete potřebovat následující:
- Nejnovější verze Node nainstalovaná na vašem počítači.
- Základní porozumění React a Reagovat háčky.
- Startovací projekt React. Prostě vytvořit aplikaci React a jste připraveni vyrazit.
Vytvořte komponentu tlačítka
Tlačítková komponenta bude zodpovědná za přepínání motivu z tmavého do světlého. Ve skutečné aplikaci může být toto tlačítko součástí komponenty Navbar.
Ve složce src vytvořte nový soubor s názvem Button.js a přidejte následující kód.
import { useState } z 'reagovat'vývoznívýchozífunkceKnoflík() {
const [theme, settheme] = useState("temný")
konst handleToggle = () => {
const newTheme = téma "světlo"? "temný": "světlo"
settheme (newTheme)
}
vrátit se (
<>
<tlačítko className="témaBtn" onClick={handleToggle}>
{téma "světlo"? <rozpětí>temný</span>: <rozpětí>světlo</span>}
</button>
</>
)
}
Nejprve importujte háček useState() z React. Budete jej používat ke sledování aktuálního tématu.
V komponentě Tlačítko inicializujte stav na tmavý. Funkce handleToggle() se postará o funkci přepínání. Spustí se při každém kliknutí na tlačítko.
Tato komponenta také přepíná text tlačítka při změně motivu.
Chcete-li zobrazit komponentu Button, importujte ji do App.js.
import Knoflík z './Knoflík';
funkceAplikace() {
vrátit se (
<div>
<Knoflík/>
</div>
);
}
vývoznívýchozí Aplikace;
Vytvořte styly CSS
Právě teď kliknutí na tlačítko nezmění uživatelské rozhraní aplikace React. K tomu budete muset nejprve vytvořit styly CSS pro tmavý a světlý režim.
V App.css přidejte následující.
tělo {
--color-text-primary: #131616;
--color-text-secondary: #ff6b00;
--color-bg-primary: #E6EDEE;
--color-bg-secondary: #7d86881c;
Pozadí: var(--color-bg-primary);
barva: var(--color-text-primary);
přechod: Pozadí 00,25 seasy-in-out;
}
body[data-theme="světlo"] {
--color-text-primary: #131616;
--color-bg-primary: #E6EDEE;
}
body[data-theme="temný"] {
--color-text-primary: #F2F5F7;
--color-bg-primary: #0E141B;
}
Zde definujete styly prvku body pomocí datových atributů. Existuje datový atribut světlého motivu a datový atribut tmavého motivu. Každá z nich má CSS proměnné s různými barvami. Použití atributů dat CSS vám umožní přepínat styly podle dat. Pokud uživatel vybere tmavé téma, můžete nastavit atribut body data na tmavé a uživatelské rozhraní se změní.
Můžete také upravit styly prvků tlačítka a změnit je s motivem.
.themeBtn {
odsazení: 10px;
barva: var(--color-text-primary);
pozadí: průhledné;
okraj: 1px pevné var(--color-text-primary);
kurzor: ukazatel;
}
Upravit komponentu tlačítka pro přepínání stylů
Chcete-li přepínat styly definované v souboru CSS, budete muset nastavit data v prvku body ve funkci handleToggle().
V Button.js upravte handleToggle() takto:
konst handleToggle = () => {
const newTheme = téma "světlo"? "temný": "světlo"
settheme (newTheme)
dokument.body.dataset.theme = téma
}
Pokud kliknete na tlačítko, pozadí by se mělo přepnout z tmavého na světlé nebo ze světlé na tmavé. Pokud však stránku obnovíte, motiv se resetuje. Chcete-li zachovat nastavení motivu, uložte předvolbu motivu do místní úložiště.
Trvalé uživatelské preference v místním úložišti
Uživatelské preference byste měli načíst, jakmile se komponenta Button vykreslí. Háček useEffect() je k tomu perfektní, protože se spouští po každém vykreslení.
Před načtením motivu z místního úložiště jej musíte nejprve uložit.
Vytvořte novou funkci nazvanou storeUserPreference() v Button.js.
konst storeUserSetPreference = (pref) => {
localStorage.setItem("téma", pref);
};
Tato funkce přijímá uživatelské preference jako argument a ukládá je jako položku nazvanou téma.
Tuto funkci zavoláte pokaždé, když uživatel přepne téma. Upravte tedy funkci handleToggle() tak, aby vypadala takto:
konst handleToggle = () => {
const newTheme = téma "světlo"? "temný": "světlo"
settheme (newTheme)
storeUserSetPreference (newTheme)
dokument.body.dataset.theme = téma
}
Následující funkce načte motiv z místního úložiště:
konst getUserSetPreference = () => {
return localStorage.getItem("téma");
};
Použijete jej v háku useEffect, takže pokaždé, když se komponenta vykreslí, načte z místního úložiště preference pro aktualizaci motivu.
useEffect(() => {
konst userSetPreference = getUserSetPreference();
if (userSetPreference) {
settheme (userSetPreference)
}
dokument.body.dataset.theme = téma
}, [téma])
Získání uživatelských předvoleb z nastavení prohlížeče
Pro ještě lepší uživatelský zážitek můžete použít preferuje-barevné schéma CSS mediální funkce pro nastavení motivu. To by mělo odrážet systémové nastavení uživatele, které může ovládat prostřednictvím svého operačního systému nebo prohlížeče. Nastavení může být světlé nebo tmavé. Ve vaší aplikaci byste toto nastavení museli zkontrolovat ihned po načtení komponenty tlačítka. To znamená implementaci této funkce v háku useEffect().
Nejprve vytvořte funkci, která načte uživatelské preference.
V Button.js přidejte následující.
konst getMediaQueryPreference = () => {
const mediaQuery = "(preferuje barevné schéma: tmavé)";
konst mql = okno.matchMedia (mediaQuery);
konst máPreference = Typ mql.matches "boolean";
if (hasPreference) {
vrátit mql.matches? "temný": "světlo";
}
};
Dále upravte háček useEffect() pro načtení předvolby dotazu na média a použijte jej, pokud v místním úložišti není nastaven žádný motiv.
useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();if (userSetPreference) {
settheme (userSetPreference)
} jiný {
settheme (mediaQueryPreference)
}
dokument.body.dataset.theme = téma
}, [téma])
Pokud aplikaci restartujete, motiv by měl odpovídat nastavení vašeho systému.
Použití kontextu reakce k přepnutí tmavého režimu
K přepínání motivu aplikace React můžete použít datové atributy, CSS a háky React.
Dalším přístupem ke zpracování tmavého režimu v Reactu je použití kontextového API. React kontext vám umožňuje sdílet data mezi komponentami, aniž byste je museli předávat přes rekvizity. Když jej použijete k přepínání motivů, vytvoříte kontext motivu, ke kterému máte přístup v celé aplikaci. Hodnotu motivu pak můžete použít k použití odpovídajících stylů.
I když tento přístup funguje, používání datových atributů CSS je jednodušší.
