Nu există nicio îndoială că modul întunecat este la furie în aceste zile. Din ce în ce mai multe aplicații oferă posibilitatea de a trece la o temă întunecată și din motive întemeiate. Dacă doriți să adăugați modul întunecat aplicației dvs. React, există câteva lucruri pe care va trebui să le faceți. În acest articol, veți învăța cum să adăugați modul întunecat la o aplicație React folosind cârligele useState și useEffect.

Ce este modul întunecat?

Modul întunecat este o temă care comută paleta de culori a unei aplicații de la deschis la întunecat. În prezent, majoritatea aplicațiilor au capacitatea de a comuta între modurile de lumină și întuneric. Acest lucru poate fi de ajutor pentru cei care preferă să lucreze într-un mediu întunecat sau pentru cei cărora le este mai ușor pentru ochi.

De ce să folosiți modul întunecat?

Există o serie de motive pentru care ați putea dori să utilizați modul întunecat în aplicația dvs. React. Să aruncăm o privire la câteva dintre cele mai populare.

1. Îmbunătățiți durata de viață a bateriei

instagram viewer

Unul dintre avantajele modului întunecat este că poate ajuta la îmbunătățirea duratei de viață a bateriei pe dispozitivele cu afișaje OLED sau AMOLED. Acest lucru se datorează faptului că pixelii mai întunecați necesită mai puțină putere pentru a fi afișați.

2. Reduce oboseala ochilor

Dacă te trezești că navighezi pe web sau folosești aplicații noaptea, modul întunecat poate ajuta la reducerea oboselii ochilor. Acest lucru se datorează faptului că scade cantitatea de lumină albă sau albastră strălucitoare care este emisă de ecran.

3. Creați o experiență mai captivantă

Unii oameni consideră că modul întunecat creează o experiență mai captivantă. Acest lucru poate fi valabil mai ales atunci când utilizați aplicații sau site-uri web cu mult conținut, cum ar fi aplicațiile de știri sau rețelele sociale.

Cum să adăugați modul întunecat la o aplicație React

Adăugarea modului întunecat la o aplicație React este relativ simplă. Pașii necesari pentru a adăuga modul întunecat aplicației dvs. React sunt enumerați mai jos.

Înainte de a începe, va trebui să vă asigurați că aveți un Configurarea aplicației React.

1. Utilizați useState Hook

Primul lucru pe care va trebui să-l faceți este să creați o variabilă de stare pentru a urmări tema curentă a aplicației dvs. Acest lucru se poate face folosind cârligul useState. Pentru aceasta, ar trebui să aveți o înțelegere de bază cum să lucrați cu cârligul useState.

import Reacționează, { useState } din 'reacţiona';
funcţieApp() {
 const [temă, setTheme] = useState('ușoară');
întoarcere (
`Aplicația ${theme}`}>
<h1>Salut Lume!</h1>
</div>
 );
}
exportMod implicit Aplicație;

Fragmentul de cod importă cârligul useState din React și creează o variabilă de stare numită theme. Variabila de temă urmărește tema curentă a aplicației, pe care codul o setează implicit la „lumină”.

2. Adăugați un buton de comutare

Apoi, adăugați un buton de comutare la aplicație, astfel încât utilizatorii să poată comuta între modul de lumină și cel întunecat. Acest lucru se poate face cu următorul cod:

import Reacționează, { useState } din 'reacţiona';
funcţieApp() {
 const [temă, setTheme] = useState('ușoară');
const toggleTheme = () => {
 dacă (temă 'ușoară') {
 setTheme('întuneric');
 } altfel {
 setTheme('ușoară');
 }
 };
întoarcere (
`Aplicația ${theme}`}>
<butonul onClick={toggleTheme}>Comutați tema</button>
<h1>Salut Lume!</h1>
</div>
 );
}
exportMod implicit Aplicație;

Fragmentul de cod de mai sus include o funcție toggleTheme pentru a schimba variabila de stare a temei între „luminoasă” și „întunecată”, precum și un buton pentru a apela funcția toggleTheme atunci când se dă clic.

3. Utilizați cârligul useEffect

Apoi, utilizați cârligul useEffect pentru a actualiza dinamic tema aplicației pe baza variabilei de stare a temei.

import Reacționează, { useState, useEffect } din 'reacţiona';
funcţieApp() {
 const [temă, setTheme] = useState('ușoară');
const toggleTheme = () => {
 dacă (temă 'ușoară') {
 setTheme('întuneric');
 } altfel {
 setTheme('ușoară');
 }
 };
 useEffect(() => {
document.body.className = tema;
 }, [temă]);
întoarcere (
`Aplicația ${theme}`}>
<butonul onClick={toggleTheme}>Comutați tema</button>
<h1>Salut Lume!</h1>
</div>
 );
}
exportMod implicit Aplicație;

Fragmentul de cod de mai sus folosește cârligul useEffect pentru a actualiza className al elementului document.body pe baza variabilei de stare a temei. Acest lucru vă permite să actualizați dinamic CSS-ul aplicației pe baza temei.

4. Adăugarea CSS pentru modurile întunecate și luminoase

Apoi, adăugați CSS pentru modurile întuneric și luminos. Puteți face acest lucru creând un fișier numit „darkMode.css” și adăugând următorul CSS:

.întuneric {
 culoare de fundal: #333;
 culoare: #fff;
}
.ușoară {
 culoare de fundal: #fff;
 culoare: #333;
}

După aceea, va trebui să importați fișierul CSS în aplicația dvs. Acest lucru se poate face cu următorul cod:

import Reacționează, { useState, useEffect } din 'reacţiona';
import './darkMode.css';
funcţieApp() {
 const [temă, setTheme] = useState('ușoară');
const toggleTheme = () => {
 dacă (temă 'ușoară') {
 setTheme('întuneric');
 } altfel {
 setTheme('ușoară');
 }
 };
 useEffect(() => {
document.body.className = tema;
 }, [temă]);
întoarcere (
`Aplicația ${theme}`}>
<butonul onClick={toggleTheme}>Comutați tema</button>
<h1>Salut Lume!</h1>
</div>
 );
}
exportMod implicit Aplicație;

5. Comutați la moduri diferite

Acum că ați adăugat CSS pentru modurile întuneric și luminos, puteți comuta între ele făcând clic pe butonul de comutare. Pentru a face acest lucru, mai întâi trebuie să porniți serverul de dezvoltare. Puteți face acest lucru rulând următoarea comandă de terminal:

npm start

După aceea, puteți deschide aplicația în browser și faceți clic pe butonul de comutare pentru a comuta între modurile întuneric și luminos.

Opțiuni suplimentare pentru modul întunecat în React

Dacă doriți ca tema să persistă în timpul reîmprospătărilor de pagină, puteți utilizați API-ul localStorage pentru a stoca datele. Pentru a face acest lucru, mai întâi va trebui să adăugați următorul cod în aplicația dvs.:

import Reacționează, { useState, useEffect } din 'reacţiona';
import './darkMode.css';
funcţieApp() {
const [temă, setTheme] = useState(
 localStorage.getItem('temă') || 'ușoară'
 );
const toggleTheme = () => {
 dacă (temă 'ușoară') {
 setTheme('întuneric');
 } altfel {
 setTheme('ușoară');
 }
 };
 useEffect(() => {
 localStorage.setItem('temă', tema);
document.body.className = tema;
 }, [temă]);
întoarcere (
`Aplicația ${theme}`}>
<butonul onClick={toggleTheme}>Comutați tema</button>
<h1>Salut Lume!</h1>
</div>
 );
}
exportMod implicit Aplicație;

Fragmentul de cod de mai sus include posibilitatea de a păstra tema după reîmprospătarea paginii. Acest lucru se face folosind API-ul localStorage. În primul rând, verifică dacă există o temă stocată în localStorage.

Dacă există o temă, se folosește acea temă. Dacă nu, se folosește tema „luminoasă”. Apoi, codul este adăugat la cârligul useEffect pentru a stoca tema în localStorage. Acest lucru asigură menținerea temei pe parcursul reîmprospătărilor paginii.

Modul întunecat nu se termină în React

Există multe moduri în care puteți adăuga modul întunecat aplicației dvs. React. În acest articol, este prezentată o modalitate de a face acest lucru folosind cârligele useState și useEffect. Cu toate acestea, există multe alte moduri în care puteți face acest lucru.

De exemplu, puteți utiliza API-ul React Context pentru a crea un furnizor de teme. Acest lucru vă va permite să împachetați întreaga aplicație într-o componentă de furnizor de teme și să accesați tema oriunde în aplicația dvs.

De asemenea, puteți activa modul întunecat în browser și puteți utiliza interogări media CSS pentru a aplica stiluri diferite, în funcție de tema browserului.