Není pochyb o tom, že temný režim je v dnešní době v módě. Stále více aplikací nabízí možnost přepnout na tmavé téma, a to z dobrého důvodu. Pokud chcete do své aplikace React přidat tmavý režim, musíte udělat několik věcí. V tomto článku se dozvíte, jak přidat tmavý režim do aplikace React pomocí háčků useState a useEffect.

Co je tmavý režim?

Tmavý režim je téma, které přepíná barevnou paletu aplikace ze světlé na tmavou. V dnešní době má většina aplikací možnost přepínat mezi světlým a tmavým režimem. To může být užitečné pro ty, kteří dávají přednost práci v tmavém prostředí, nebo pro ty, kteří to považují za lehčí pro oči.

Proč používat tmavý režim?

Existuje řada důvodů, proč byste mohli chtít v aplikaci React používat tmavý režim. Pojďme se podívat na pár těch nejoblíbenějších.

1. Zlepšete životnost baterie

Jednou z výhod tmavého režimu je, že může pomoci zlepšit výdrž baterie na zařízeních s OLED nebo AMOLED displeji. Je to proto, že tmavší pixely vyžadují k zobrazení méně energie.

2. Snižte únavu očí

instagram viewer

Pokud se přistihnete při procházení webu nebo používání aplikací v noci, tmavý režim může pomoci snížit únavu očí. Je to proto, že snižuje množství jasného bílého nebo modrého světla vyzařovaného z obrazovky.

3. Vytvořte více pohlcující zážitek

Někteří lidé zjišťují, že tmavý režim vytváří pohlcující zážitek. To může platit zejména při používání aplikací nebo webových stránek s velkým množstvím obsahu, jako jsou zpravodajské aplikace nebo sociální média.

Jak přidat tmavý režim do aplikace React

Přidání tmavého režimu do aplikace React je poměrně jednoduché. Kroky potřebné k přidání tmavého režimu do vaší aplikace React jsou uvedeny níže.

Než začneme, musíte se ujistit, že máte React nastavení aplikace.

1. Použijte useState Hook

První věc, kterou budete muset udělat, je vytvořit stavovou proměnnou pro sledování aktuálního tématu vaší aplikace. To lze provést pomocí háčku useState. K tomu byste měli mít základní znalosti jak pracovat s háčkem useState.

import Reagovat, { useState } z 'reagovat';
funkceAplikace() {
 const [theme, setTheme] = useState('světlo');
vrátit se (
Aplikace ${theme}`}>
<h1>Ahoj světe!</h1>
</div>
 );
}
vývoznívýchozí Aplikace;

Fragment kódu importuje háček useState z React a vytvoří stavovou proměnnou nazvanou téma. Proměnná theme sleduje aktuální téma aplikace, které kód ve výchozím nastavení nastaví na „light“.

2. Přidejte přepínací tlačítko

Dále do aplikace přidejte přepínací tlačítko, aby uživatelé mohli přepínat mezi světlým a tmavým režimem. To lze provést pomocí následujícího kódu:

import Reagovat, { useState } z 'reagovat';
funkceAplikace() {
 const [theme, setTheme] = useState('světlo');
konst toggleTheme = () => {
 pokud (téma 'světlo') {
 setTheme('temný');
 } jiný {
 setTheme('světlo');
 }
 };
vrátit se (
Aplikace ${theme}`}>
<button onClick={toggleTheme}>Přepnout motiv</button>
<h1>Ahoj světe!</h1>
</div>
 );
}
vývoznívýchozí Aplikace;

Fragment kódu výše obsahuje funkci toggleTheme pro změnu proměnné stavu motivu mezi 'světlý' a 'tmavý' a také tlačítko pro volání funkce toggleTheme po kliknutí.

3. Použijte háček useEffect

Dále použijte háček useEffect k dynamické aktualizaci motivu aplikace na základě proměnné stavu motivu.

import Reagovat, { useState, useEffect } z 'reagovat';
funkceAplikace() {
 const [theme, setTheme] = useState('světlo');
konst toggleTheme = () => {
 pokud (téma 'světlo') {
 setTheme('temný');
 } jiný {
 setTheme('světlo');
 }
 };
 useEffect(() => {
dokument.body.className = téma;
 }, [téma]);
vrátit se (
Aplikace ${theme}`}>
<button onClick={toggleTheme}>Přepnout motiv</button>
<h1>Ahoj světe!</h1>
</div>
 );
}
vývoznívýchozí Aplikace;

Fragment kódu výše používá háček useEffect k aktualizaci className prvku document.body na základě proměnné stavu motivu. To vám umožní dynamicky aktualizovat CSS aplikace na základě tématu.

4. Přidání CSS pro tmavý a světlý režim

Dále přidejte CSS pro tmavý a světlý režim. Můžete to udělat vytvořením souboru s názvem 'darkMode.css' a přidáním následujícího CSS:

.temný {
 barva pozadí: #333;
 barva: #fff;
}
.světlo {
 barva pozadí: #fff;
 barva: #333;
}

Poté budete muset importovat soubor CSS do aplikace. To lze provést pomocí následujícího kódu:

import Reagovat, { useState, useEffect } z 'reagovat';
import './darkMode.css';
funkceAplikace() {
 const [theme, setTheme] = useState('světlo');
konst toggleTheme = () => {
 pokud (téma 'světlo') {
 setTheme('temný');
 } jiný {
 setTheme('světlo');
 }
 };
 useEffect(() => {
dokument.body.className = téma;
 }, [téma]);
vrátit se (
Aplikace ${theme}`}>
<button onClick={toggleTheme}>Přepnout motiv</button>
<h1>Ahoj světe!</h1>
</div>
 );
}
vývoznívýchozí Aplikace;

5. Přepnout do různých režimů

Nyní, když jste přidali CSS pro tmavý a světlý režim, můžete mezi nimi přepínat kliknutím na přepínací tlačítko. Chcete-li to provést, musíte nejprve spustit vývojový server. Můžete to provést spuštěním následujícího příkazu terminálu:

npm Start

Poté můžete aplikaci otevřít v prohlížeči a kliknutím na přepínací tlačítko přepínat mezi tmavým a světlým režimem.

Další možnosti pro tmavý režim v Reactu

Pokud chcete, aby motiv přetrvával při obnovování stránky, můžete k ukládání dat použijte rozhraní localStorage API. Chcete-li to provést, musíte do aplikace nejprve přidat následující kód:

import Reagovat, { useState, useEffect } z 'reagovat';
import './darkMode.css';
funkceAplikace() {
konst [theme, setTheme] = useState(
 localStorage.getItem('téma') || 'světlo'
 );
konst toggleTheme = () => {
 pokud (téma 'světlo') {
 setTheme('temný');
 } jiný {
 setTheme('světlo');
 }
 };
 useEffect(() => {
 localStorage.setItem('téma', téma);
dokument.body.className = téma;
 }, [téma]);
vrátit se (
Aplikace ${theme}`}>
<button onClick={toggleTheme}>Přepnout motiv</button>
<h1>Ahoj světe!</h1>
</div>
 );
}
vývoznívýchozí Aplikace;

Výše uvedený fragment kódu obsahuje možnost zachovat motiv i po obnovení stránky. To se provádí pomocí localStorage API. Nejprve zkontroluje, zda je v localStorage uložen motiv.

Pokud existuje téma, použije se toto téma. Pokud ne, použije se téma „světlo“. Dále se do háku useEffect přidá kód pro uložení motivu v localStorage. Tím je zajištěno, že motiv zůstane zachován i při obnovování stránky.

Tmavý režim nekončí v React

Existuje mnoho způsobů, jak přidat tmavý režim do aplikace React. V tomto článku je ukázán jeden způsob, jak to udělat pomocí háčků useState a useEffect. Existuje však mnoho dalších způsobů, jak to můžete udělat.

Můžete například použít rozhraní React Context API k vytvoření poskytovatele motivu. To by vám umožnilo zabalit celou vaši aplikaci do komponenty poskytovatele motivu a přistupovat k tématu kdekoli ve vaší aplikaci.

V prohlížeči můžete také povolit tmavý režim a pomocí dotazů na média CSS použít různé styly v závislosti na motivu prohlížeče.