Niet pochýb o tom, že tmavý režim je v dnešnej dobe v móde. Čoraz viac aplikácií ponúka možnosť prepnúť na tmavú tému, a to z dobrého dôvodu. Ak chcete do aplikácie React pridať tmavý režim, musíte urobiť niekoľko vecí. V tomto článku sa dozviete, ako pridať tmavý režim do aplikácie React pomocou háčikov useState a useEffect.

Čo je tmavý režim?

Tmavý režim je téma, ktorá prepína farebnú paletu aplikácie zo svetlej na tmavú. V súčasnosti má väčšina aplikácií možnosť prepínať medzi svetlým a tmavým režimom. To môže byť užitočné pre tých, ktorí uprednostňujú prácu v tmavom prostredí, alebo pre tých, ktorí to považujú za ľahšie pre oči.

Prečo používať tmavý režim?

Existuje niekoľko dôvodov, prečo by ste mohli chcieť použiť tmavý režim v aplikácii React. Poďme sa pozrieť na niekoľko najpopulárnejších.

1. Zlepšite životnosť batérie

Jednou z výhod tmavého režimu je, že môže pomôcť zlepšiť výdrž batérie na zariadeniach s displejmi OLED alebo AMOLED. Je to preto, že tmavšie pixely vyžadujú menej energie na zobrazenie.

instagram viewer

2. Znížte namáhanie očí

Ak sa ocitnete pri prezeraní webu alebo používaní aplikácií v noci, tmavý režim vám môže pomôcť znížiť únavu očí. Je to preto, že znižuje množstvo jasného bieleho alebo modrého svetla, ktoré je vyžarované z obrazovky.

3. Vytvorte pôsobivejší zážitok

Niektorí ľudia zistili, že tmavý režim vytvára pohlcujúcejší zážitok. To môže platiť najmä pri používaní aplikácií alebo webových stránok s veľkým množstvom obsahu, ako sú spravodajské aplikácie alebo sociálne médiá.

Ako pridať tmavý režim do aplikácie React

Pridanie tmavého režimu do aplikácie React je pomerne jednoduché. Kroky potrebné na pridanie tmavého režimu do vašej aplikácie React sú uvedené nižšie.

Skôr ako začneme, musíte sa uistiť, že máte a Aplikácia React je nastavená.

1. Použite useState Hook

Prvá vec, ktorú musíte urobiť, je vytvoriť stavovú premennú na sledovanie aktuálnej témy vašej aplikácie. To je možné vykonať pomocou háku useState. Na to by ste mali mať základné znalosti ako pracovať s háčikom useState.

importovať Reagovať, { useState } od 'reagovať';
funkciuApp() {
 const [theme, setTheme] = useState('svetlo');
vrátiť (
Aplikácia ${theme}`}>
<h1>Ahoj svet!</h1>
</div>
 );
}
exportpredvolená App;

Útržok kódu importuje háčik useState z React a vytvorí stavovú premennú s názvom téma. Premenná témy sleduje aktuálnu tému aplikácie, ktorú kód predvolene nastaví na „svetlo“.

2. Pridať prepínacie tlačidlo

Potom do aplikácie pridajte prepínacie tlačidlo, aby používatelia mohli prepínať medzi svetlým a tmavým režimom. To možno vykonať pomocou nasledujúceho kódu:

importovať Reagovať, { useState } od 'reagovať';
funkciuApp() {
 const [theme, setTheme] = useState('svetlo');
konšt toggleTheme = () => {
 ak (téma 'svetlo') {
 setTheme('tmavé');
 } inak {
 setTheme('svetlo');
 }
 };
vrátiť (
Aplikácia ${theme}`}>
<button onClick={toggleTheme}>Prepnúť tému</button>
<h1>Ahoj svet!</h1>
</div>
 );
}
exportpredvolená App;

Útržok kódu vyššie obsahuje funkciu toggleTheme na zmenu premennej stavu témy medzi „svetlá“ a „tmavá“, ako aj tlačidlo na zavolanie funkcie toggleTheme po kliknutí.

3. Použite háčik useEffect

Potom použite háčik useEffect na dynamickú aktualizáciu témy aplikácie na základe premennej stavu témy.

importovať Reaguj, { useState, useEffect } od 'reagovať';
funkciuApp() {
 const [theme, setTheme] = useState('svetlo');
konšt toggleTheme = () => {
 ak (téma 'svetlo') {
 setTheme('tmavé');
 } inak {
 setTheme('svetlo');
 }
 };
 useEffect(() => {
dokument.body.className = téma;
 }, [téma]);
vrátiť (
Aplikácia ${theme}`}>
<button onClick={toggleTheme}>Prepnúť tému</button>
<h1>Ahoj svet!</h1>
</div>
 );
}
exportpredvolená App;

Útržok kódu vyššie používa háčik useEffect na aktualizáciu className prvku document.body na základe premennej stavu témy. To vám umožňuje dynamicky aktualizovať CSS aplikácie na základe témy.

4. Pridanie CSS pre tmavý a svetlý režim

Ďalej pridajte CSS pre tmavý a svetlý režim. Môžete to urobiť vytvorením súboru s názvom „darkMode.css“ a pridaním nasledujúceho CSS:

.tmavý {
 farba pozadia: #333;
 farba: #fff;
}
.svetlo {
 farba pozadia: #fff;
 farba: #333;
}

Potom budete musieť importovať súbor CSS do vašej aplikácie. To možno vykonať pomocou nasledujúceho kódu:

importovať Reaguj, { useState, useEffect } od 'reagovať';
importovať './darkMode.css';
funkciuApp() {
 const [theme, setTheme] = useState('svetlo');
konšt toggleTheme = () => {
 ak (téma 'svetlo') {
 setTheme('tmavé');
 } inak {
 setTheme('svetlo');
 }
 };
 useEffect(() => {
dokument.body.className = téma;
 }, [téma]);
vrátiť (
Aplikácia ${theme}`}>
<button onClick={toggleTheme}>Prepnúť tému</button>
<h1>Ahoj svet!</h1>
</div>
 );
}
exportpredvolená App;

5. Prepnúť do rôznych režimov

Teraz, keď ste pridali CSS pre tmavý a svetlý režim, môžete medzi nimi prepínať kliknutím na prepínač. Ak to chcete urobiť, musíte najskôr spustiť vývojový server. Môžete to urobiť spustením nasledujúceho príkazu terminálu:

npm začať

Potom môžete aplikáciu otvoriť v prehliadači a kliknutím na prepínač prepínať medzi tmavým a svetlým režimom.

Ďalšie možnosti pre tmavý režim v React

Ak chcete, aby téma pretrvávala pri obnovovaní stránky, môžete na ukladanie údajov použite rozhranie localStorage API. Ak to chcete urobiť, musíte do aplikácie pridať nasledujúci kód:

importovať Reaguj, { useState, useEffect } od 'reagovať';
importovať './darkMode.css';
funkciuApp() {
konšt [theme, setTheme] = useState(
 localStorage.getItem('tému') || 'svetlo'
 );
konšt toggleTheme = () => {
 ak (téma 'svetlo') {
 setTheme('tmavé');
 } inak {
 setTheme('svetlo');
 }
 };
 useEffect(() => {
 localStorage.setItem('tému', téma);
dokument.body.className = téma;
 }, [téma]);
vrátiť (
Aplikácia ${theme}`}>
<button onClick={toggleTheme}>Prepnúť tému</button>
<h1>Ahoj svet!</h1>
</div>
 );
}
exportpredvolená App;

Útržok kódu uvedený vyššie obsahuje možnosť zachovať tému aj po obnovení stránky. To sa vykonáva pomocou localStorage API. Najprv skontroluje, či je v localStorage uložená téma.

Ak existuje téma, použije sa táto. Ak nie, použije sa „svetlá“ téma. Ďalej sa do háku useEffect pridá kód na uloženie témy do localStorage. Tým sa zabezpečí, že téma zostane zachovaná počas obnovovania stránky.

Tmavý režim nekončí v reakcii

Existuje mnoho spôsobov, ako môžete do aplikácie React pridať tmavý režim. V tomto článku je uvedený jeden spôsob, ako to urobiť pomocou háčikov useState a useEffect. Môžete to však urobiť aj mnohými inými spôsobmi.

Môžete napríklad použiť React Context API na vytvorenie poskytovateľa témy. To by vám umožnilo zabaliť celú vašu aplikáciu do komponentu poskytovateľa témy a získať prístup k téme kdekoľvek vo vašej aplikácii.

Vo svojom prehliadači môžete tiež povoliť tmavý režim a pomocou mediálnych dopytov CSS použiť rôzne štýly v závislosti od témy prehliadača.