Kétségtelen, hogy manapság divatos a sötét mód. Egyre több alkalmazás kínál lehetőséget a sötét témára való váltásra, és ennek jó oka van. Ha sötét módot szeretne hozzáadni a React alkalmazáshoz, néhány dolgot meg kell tennie. Ebből a cikkből megtudhatja, hogyan adhat hozzá sötét módot egy React alkalmazáshoz a useState és a useEffect hook segítségével.

Mi az a sötét mód?

A sötét mód egy olyan téma, amely egy alkalmazás színpalettáját világosról sötétre váltja. Manapság a legtöbb alkalmazás képes váltani a világos és sötét módok között. Ez azoknak lehet hasznos, akik inkább sötét környezetben dolgoznak, vagy azoknak, akiknek könnyebb a szemük.

Miért használja a Sötét módot?

Számos oka lehet annak, hogy miért érdemes sötét módot használni a React alkalmazásban. Nézzünk meg néhányat a legnépszerűbbek közül.

1. Az akkumulátor élettartamának javítása

A sötét mód egyik előnye, hogy javíthatja az akkumulátor élettartamát az OLED vagy AMOLED kijelzővel rendelkező eszközökön. Ennek az az oka, hogy a sötétebb képpontok megjelenítéséhez kevesebb energiára van szükség.

instagram viewer

2. Csökkentse a szem megerőltetését

Ha azon kapja magát, hogy éjszaka böngészi az internetet vagy alkalmazásokat használ, a sötét mód segíthet csökkenteni a szem megerőltetését. Ennek az az oka, hogy csökkenti a képernyőről kibocsátott élénk fehér vagy kék fény mennyiségét.

3. Hozzon létre még magával ragadó élményt

Vannak, akik úgy találják, hogy a sötét mód magával ragadóbb élményt nyújt. Ez különösen akkor lehet igaz, ha sok tartalommal rendelkező alkalmazásokat vagy webhelyeket használ, például híralkalmazásokat vagy közösségi médiát.

Sötét mód hozzáadása egy React alkalmazáshoz

A sötét mód hozzáadása egy React alkalmazáshoz viszonylag egyszerű. Az alábbiakban felsoroljuk a sötét mód React alkalmazáshoz való hozzáadásához szükséges lépéseket.

Mielőtt elkezdenénk, meg kell győződnie arról, hogy rendelkezik a React alkalmazás beállítása.

1. Használja a useState Hook-ot

Az első dolog, amit meg kell tennie, hogy hozzon létre egy állapotváltozót az alkalmazás aktuális témájának nyomon követéséhez. Ezt a useState hook segítségével lehet megtenni. Ehhez alapvető ismeretekkel kell rendelkeznie hogyan kell dolgozni a useState horoggal.

import React, { useState } tól től 'reagál';
funkcióApp() {
 const [téma, setTheme] = useState('könnyű');
Visszatérés (
`App ${theme}`}>
<h1>Helló Világ!</h1>
</div>
 );
}
exportalapértelmezett App;

A kódrészlet importálja a useState hookot a Reactból, és létrehoz egy téma nevű állapotváltozót. A témaváltozó követi az alkalmazás aktuális témáját, amelyet a kód alapértelmezés szerint „light”-ra állít be.

2. Váltógomb hozzáadása

Ezután adjon hozzá egy váltógombot az alkalmazáshoz, hogy a felhasználók válthassanak világos és sötét mód között. Ezt a következő kóddal lehet megtenni:

import React, { useState } tól től 'reagál';
funkcióApp() {
 const [téma, setTheme] = useState('könnyű');
const toggleTheme = () => {
 ha (téma 'könnyű') {
 setTheme('sötét');
 } más {
 setTheme('könnyű');
 }
 };
Visszatérés (
`App ${theme}`}>
<gomb onClick={toggleTheme}>Téma váltása</button>
<h1>Helló Világ!</h1>
</div>
 );
}
exportalapértelmezett App;

A fenti kódrészlet tartalmaz egy toggleTheme függvényt a téma állapotváltozójának „világos” és „sötét” közötti módosításához, valamint egy gombot a toggleTheme függvény meghívására, ha kattintunk.

3. Használja a useEffect Hook-ot

Ezután használja a useEffect hook-ot az alkalmazás témájának dinamikus frissítéséhez a téma állapotváltozója alapján.

import React, { useState, useEffect } tól től 'reagál';
funkcióApp() {
 const [téma, setTheme] = useState('könnyű');
const toggleTheme = () => {
 ha (téma 'könnyű') {
 setTheme('sötét');
 } más {
 setTheme('könnyű');
 }
 };
 useEffect(() => {
dokumentum.body.className = téma;
 }, [téma]);
Visszatérés (
`App ${theme}`}>
<gomb onClick={toggleTheme}>Téma váltása</button>
<h1>Helló Világ!</h1>
</div>
 );
}
exportalapértelmezett App;

A fenti kódrészlet a useEffect hook segítségével frissíti a document.body elem className-jét a téma állapotváltozója alapján. Ez lehetővé teszi az alkalmazás CSS-jének dinamikus frissítését a téma alapján.

4. A CSS hozzáadása a sötét és világos módokhoz

Ezután adja hozzá a CSS-t a sötét és világos módokhoz. Ezt úgy teheti meg, hogy létrehoz egy „darkMode.css” nevű fájlt, és hozzáadja a következő CSS-t:

.sötét {
 háttérszín: #333;
 szín: #fff;
}
.könnyű {
 háttérszín: #fff;
 szín: #333;
}

Ezt követően importálnia kell a CSS-fájlt az alkalmazásba. Ezt a következő kóddal lehet megtenni:

import React, { useState, useEffect } tól től 'reagál';
import './darkMode.css';
funkcióApp() {
 const [téma, setTheme] = useState('könnyű');
const toggleTheme = () => {
 ha (téma 'könnyű') {
 setTheme('sötét');
 } más {
 setTheme('könnyű');
 }
 };
 useEffect(() => {
dokumentum.body.className = téma;
 }, [téma]);
Visszatérés (
`App ${theme}`}>
<gomb onClick={toggleTheme}>Téma váltása</button>
<h1>Helló Világ!</h1>
</div>
 );
}
exportalapértelmezett App;

5. Váltson különböző módokra

Most, hogy hozzáadta a CSS-t a sötét és világos módokhoz, a váltógombra kattintva válthat közöttük. Ehhez először el kell indítania a fejlesztőkiszolgálót. Ezt a következő terminálparancs futtatásával teheti meg:

npm Rajt

Ezt követően megnyithatja az alkalmazást a böngészőben, és a váltógombra kattintva válthat a sötét és a világos mód között.

További lehetőségek a Sötét módhoz a Reactban

Ha azt szeretné, hogy a téma az oldalfrissítések során is megmaradjon, megteheti használja a localStorage API-t az adatok tárolásához. Ehhez először hozzá kell adnia a következő kódot az alkalmazáshoz:

import React, { useState, useEffect } tól től 'reagál';
import './darkMode.css';
funkcióApp() {
const [téma, setTheme] = useState(
 localStorage.getItem('téma') || 'könnyű'
 );
const toggleTheme = () => {
 ha (téma 'könnyű') {
 setTheme('sötét');
 } más {
 setTheme('könnyű');
 }
 };
 useEffect(() => {
 localStorage.setItem('téma', téma);
dokumentum.body.className = téma;
 }, [téma]);
Visszatérés (
`App ${theme}`}>
<gomb onClick={toggleTheme}>Téma váltása</button>
<h1>Helló Világ!</h1>
</div>
 );
}
exportalapértelmezett App;

A fenti kódrészlet lehetővé teszi a téma megtartását az oldal frissítése után. Ez a localStorage API használatával történik. Először is ellenőrzi, hogy van-e téma a localStorage-ban tárolva.

Ha van téma, akkor az a téma kerül felhasználásra. Ha nem, akkor a „light” téma kerül alkalmazásra. Ezután a kód hozzáadásra kerül a useEffect hook-hoz, hogy a témát a localStorage-ban tárolja. Ez biztosítja, hogy a téma az oldalfrissítések során is megmaradjon.

A sötét mód nem ér véget a React funkcióval

Sokféleképpen adhat hozzá sötét módot a React alkalmazáshoz. Ebben a cikkben bemutatjuk a useState és a useEffect hookok egyik módját. Azonban sok más módja is van ennek.

Például használhatja a React Context API-t egy témaszolgáltató létrehozásához. Ez lehetővé teszi, hogy a teljes alkalmazást egy témaszolgáltató összetevőbe csomagolja, és bárhol elérje a témát az alkalmazásban.

Engedélyezheti a sötét módot is a böngészőjében, és CSS-médialekérdezések segítségével különböző stílusokat alkalmazhat a böngésző témájától függően.