Cum să creați modul întunecat în React fără a utiliza contextul React

A devenit popular ca aplicațiile să aibă o setare care vă permite să comutați între modurile întunecate și lumina. Poate se datorează popularității interfețelor de utilizator întunecate, poate din cauza faptului că aplicațiile devin treptat mai configurabile.

Contextul React este o modalitate ușoară de partajare a datelor la nivel global, dar poate face mai dificilă reutilizarea componentelor. Ca alternativă, puteți construi o componentă de buton în modul întunecat care utilizează cârligele useEffect și useState în loc de context. Acesta va comuta un atribut de date pe elementul body pe care stilurile CSS îl pot viza.

Ce vei avea nevoie

Pentru a urma acest tutorial, veți avea nevoie de următoarele:

• O versiune recentă a Node instalată pe computer.
• O înțelegere de bază a React și Cârlige de reacție.
• Un proiect React inițial. Doar creați o aplicație React și ești gata să pleci.

Creați o componentă de buton

Componenta butonului va fi responsabilă pentru comutarea temei de la întuneric la deschis. Într-o aplicație reală, acest buton ar putea face parte din componenta Navbar.

În folderul src, creați un fișier nou numit Button.js și adăugați următorul cod.

import { useState } din 'reacţiona'
exportMod implicitfuncţieButon() {
 const [temă, settheme] = useState("întuneric")
const handleToggle = () => {
 const newTheme = theme "ușoară"? "întuneric": "ușoară"
 settheme (newTheme)
 }
întoarcere (
<>
<butonul className="temaBtn" onClick={handleToggle}>
 {temă "ușoară"? <span>întuneric</span>: <span>ușoară</span>}
</button>
</>
 )
}

Mai întâi, importați cârligul useState() din React. Îl vei folosi pentru a urmări tema curentă.

În componenta Button, inițializați starea la întuneric. Funcția handleToggle() se va ocupa de funcționalitatea de comutare. Se rulează de fiecare dată când se face clic pe butonul.

Această componentă comută și textul butonului atunci când schimbă tema.

Pentru a afișa componenta Button, importați-o în App.js.

import Buton din './Buton';
funcţieApp() {
întoarcere (
<div>
<Buton/>
</div>
 );
}
exportMod implicit Aplicație;

Creați stilurile CSS

În acest moment, făcând clic pe butonul nu se schimbă interfața de utilizare a aplicației React. Pentru aceasta, va trebui mai întâi să creați stilurile CSS pentru modul întunecat și luminos.

În App.css, adăugați următoarele.

corp {
 --color-text-primary: #131616;
 --color-text-secondary: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 fundal: var(--color-bg-primar);
 culoare: var(--color-text-primar);
tranziție: fundal 0.25sușurință-in-out;
}
body[data-theme="ușoară"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
body[data-theme="întuneric"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Aici, definiți stilurile elementului body folosind atribute de date. Există atributul de date pentru tema luminoasă și atributul de date pentru tema întunecată. Fiecare dintre ele are variabile CSS cu culori diferite. Utilizarea atributelor de date CSS vă va permite să schimbați stilurile în funcție de date. Dacă un utilizator selectează o temă întunecată, puteți seta atributul datelor corpului la întunecat și interfața de utilizare se va schimba.

De asemenea, puteți modifica stilurile elementelor de buton pentru a le schimba odată cu tema.

.temăBtn {
 umplutură: 10px;
 culoare: var(--color-text-primar);
 fundal: transparent;
 frontieră: 1px solid var(--color-text-primar);
 cursor: pointer;
}

Modificați componenta butonului pentru a comuta stilurile

Pentru a comuta stilurile definite în fișierul CSS, va trebui să setați datele din elementul body în funcția handleToggle().

În Button.js, modificați handleToggle() astfel:

const handleToggle = () => {
 const newTheme = theme "ușoară"? "întuneric": "ușoară"
 settheme (newTheme)
document.body.dataset.theme = temă
}

Dacă faceți clic pe buton, fundalul ar trebui să comute de la întunecat la deschis sau deschis la întunecat. Cu toate acestea, dacă reîmprospătați pagina, tema se resetează. Pentru a persista setarea temei, stocați preferința temei în depozitare locală.

Preferința utilizatorului persistentă în stocarea locală

Ar trebui să preluați preferința utilizatorului imediat ce componenta Button este redată. Cârligul useEffect() este perfect pentru aceasta, deoarece rulează după fiecare randare.

Înainte de a prelua tema din stocarea locală, trebuie să o stocați mai întâi.

Creați o nouă funcție numită storeUserPreference() în Button.js.

const storeUserSetPreference = (pref) => {
 localStorage.setItem("temă", pref);
};

Această funcție primește preferința utilizatorului ca argument și o stochează ca element numit temă.

Veți apela această funcție de fiecare dată când utilizatorul comută tema. Deci, modificați funcția handleToggle() pentru a arăta astfel:

const handleToggle = () => {
 const newTheme = theme "ușoară"? "întuneric": "ușoară"
 settheme (newTheme)
 storeUserSetPreference (temă nouă)
document.body.dataset.theme = temă
}

Următoarea funcție preia tema din stocarea locală:

const getUserSetPreference = () => {
 return localStorage.getItem("temă");
};

Îl vei folosi în cârligul useEffect, astfel încât de fiecare dată când componenta este randată, preia preferința din stocarea locală pentru a actualiza tema.

useEffect(() => {
const userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
document.body.dataset.theme = temă
}, [temă])

Obținerea preferințelor utilizatorului din setările browserului

Pentru o experiență de utilizator și mai bună, puteți utiliza preferă-schema-culoare Caracteristica media CSS pentru a seta tema. Acest lucru ar trebui să reflecte setările de sistem ale unui utilizator pe care le poate controla prin sistemul de operare sau browser. Setarea poate fi deschisă sau întunecată. În aplicația dvs., ar trebui să verificați această setare imediat după încărcarea componentei butonului. Aceasta înseamnă implementarea acestei funcționalități în cârligul useEffect().

Mai întâi, creați o funcție care preia preferința utilizatorului.

În Button.js, adăugați următoarele.

const getMediaQueryPreference = () => {
 const mediaQuery = "(preferă-schema-de-culori: întuneric)";
const mql = fereastră.matchMedia (mediaQuery);
const arePreference = tip de mql.match „boolean”;
dacă (are Preferință) {
 returnează mql.match? "întuneric": "ușoară";
 }
};

Apoi, modificați cârligul useEffect() pentru a prelua preferința de interogare media și utilizați-o dacă nu este setată nicio temă în stocarea locală.

useEffect(() => {
const userSetPreference = getUserSetPreference();
const mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } altfel {
 settheme (mediaQueryPreference)
 }
document.body.dataset.theme = temă
}, [temă])

Dacă reporniți aplicația, tema ar trebui să se potrivească cu setările sistemului dvs.

Utilizarea contextului React pentru a comuta în modul întunecat

Puteți folosi atribute de date, CSS și cârlige React pentru a comuta tema unei aplicații React.

O altă abordare a gestionării modului întunecat în React este utilizarea API-ului context. Contextul React vă permite să partajați date între componente fără a fi nevoie să le transmiteți prin elemente de recuzită. Când îl utilizați pentru a comuta între teme, creați un context de temă pe care îl puteți accesa în întreaga aplicație. Puteți utiliza apoi valoarea temei pentru a aplica stiluri potrivite.

În timp ce această abordare funcționează, utilizarea atributelor de date CSS este mai simplă.