Het lijdt geen twijfel dat de donkere modus tegenwoordig een rage is. Steeds meer applicaties bieden de mogelijkheid om over te schakelen naar een donker thema, en terecht. Als je de donkere modus aan je React-toepassing wilt toevoegen, zijn er een paar dingen die je moet doen. In dit artikel leert u hoe u de donkere modus toevoegt aan een React-toepassing met behulp van de useState- en useEffect-haken.

Wat is de donkere modus?

De donkere modus is een thema dat het kleurenpalet van een toepassing van licht naar donker schakelt. Tegenwoordig hebben de meeste applicaties de mogelijkheid om te schakelen tussen lichte en donkere modi. Dit kan handig zijn voor degenen die liever in een donkere omgeving werken, of voor degenen die het prettiger vinden voor de ogen.

Waarom de donkere modus gebruiken?

Er zijn een aantal redenen waarom u de donkere modus in uw React-toepassing zou willen gebruiken. Laten we een paar van de meest populaire bekijken.

1. Levensduur van de batterij verbeteren

Een van de voordelen van de donkere modus is dat het de levensduur van de batterij kan helpen verbeteren op apparaten met OLED- of AMOLED-schermen. Dit komt omdat donkere pixels minder stroom nodig hebben om weer te geven.

instagram viewer

2. Verminder vermoeidheid van de ogen

Als u merkt dat u 's nachts op internet surft of apps gebruikt, kan de donkere modus helpen om vermoeide ogen te verminderen. Dit komt omdat het de hoeveelheid helder wit of blauw licht dat door het scherm wordt uitgestraald, vermindert.

3. Creëer een meer meeslepende ervaring

Sommige mensen vinden dat de donkere modus een meer meeslepende ervaring creëert. Dit kan met name het geval zijn bij het gebruik van apps of websites met veel inhoud, zoals nieuws-apps of sociale media.

Hoe de donkere modus aan een React-toepassing toe te voegen

Het toevoegen van de donkere modus aan een React-toepassing is relatief eenvoudig. De stappen die nodig zijn om de donkere modus aan uw React-toepassing toe te voegen, worden hieronder vermeld.

Voordat we beginnen, moet je ervoor zorgen dat je een Reageren applicatie instellen.

1. Gebruik de useState Hook

Het eerste dat u moet doen, is een statusvariabele maken om het huidige thema van uw toepassing bij te houden. Dit kan met behulp van de useState hook. Hiervoor moet u een basiskennis hebben van hoe te werken met de useState hook.

importeren Reageren, { useState } van 'Reageer';
functieApp() {
 const [thema, setTheme] = useState('licht');
opbrengst (
'App' ${thema}`}>
<h1>Hallo Wereld!</h1>
</div>
 );
}
exporterenstandaard App;

Het codefragment importeert de useState-hook uit React en maakt een toestandsvariabele met de naam thema. De themavariabele volgt het huidige thema van de applicatie, die de code standaard op 'light' zet.

2. Een schakelknop toevoegen

Voeg vervolgens een schakelknop toe aan de applicatie, zodat gebruikers kunnen schakelen tussen de lichte en donkere modus. Dit kan met de volgende code:

importeren Reageren, { useState } van 'Reageer';
functieApp() {
 const [thema, setTheme] = useState('licht');
const toggleThema = () => {
 als (thema 'licht') {
 setThema('donker');
 } anders {
 setThema('licht');
 }
 };
opbrengst (
'App' ${thema}`}>
<knop onClick={toggleTheme}>Thema wisselen</button>
<h1>Hallo Wereld!</h1>
</div>
 );
}
exporterenstandaard App;

Het bovenstaande codefragment bevat een toggleTheme-functie om de themastatusvariabele te wijzigen tussen 'light' en 'dark', evenals een knop om de toggleTheme-functie aan te roepen wanneer erop wordt geklikt.

3. Gebruik de useEffect Hook

Gebruik vervolgens de useEffect-hook om het thema van de toepassing dynamisch bij te werken op basis van de themastatusvariabele.

importeren Reageren, { useState, useEffect } van 'Reageer';
functieApp() {
 const [thema, setTheme] = useState('licht');
const toggleThema = () => {
 als (thema 'licht') {
 setThema('donker');
 } anders {
 setThema('licht');
 }
 };
 gebruikEffect(() => {
document.body.className = thema;
 }, [thema]);
opbrengst (
'App' ${thema}`}>
<knop onClick={toggleTheme}>Thema wisselen</button>
<h1>Hallo Wereld!</h1>
</div>
 );
}
exporterenstandaard App;

Het bovenstaande codefragment gebruikt de useEffect-hook om de className van het document.body-element bij te werken op basis van de themastatusvariabele. Hiermee kunt u de CSS van de applicatie dynamisch bijwerken op basis van het thema.

4. De CSS voor donkere en lichte modi toevoegen

Voeg vervolgens de CSS toe voor de donkere en lichte modi. U kunt dit doen door een bestand met de naam 'darkMode.css' te maken en de volgende CSS toe te voegen:

.donker {
 Achtergrond kleur: #333;
 kleur: #ff;
}
.licht {
 Achtergrond kleur: #ff;
 kleur: #333;
}

Daarna moet u het CSS-bestand in uw toepassing importeren. Dit kan met de volgende code:

importeren Reageren, { useState, useEffect } van 'Reageer';
importeren './darkMode.css';
functieApp() {
 const [thema, setTheme] = useState('licht');
const toggleThema = () => {
 als (thema 'licht') {
 setThema('donker');
 } anders {
 setThema('licht');
 }
 };
 gebruikEffect(() => {
document.body.className = thema;
 }, [thema]);
opbrengst (
'App' ${thema}`}>
<knop onClick={toggleTheme}>Thema wisselen</button>
<h1>Hallo Wereld!</h1>
</div>
 );
}
exporterenstandaard App;

5. Overschakelen naar verschillende modi

Nu u de CSS voor de donkere en lichte modi hebt toegevoegd, kunt u ertussen schakelen door op de schakelknop te klikken. Om dit te doen, moet u eerst de ontwikkelserver starten. U kunt dit doen door de volgende terminalopdracht uit te voeren:

npm begin

Daarna kunt u de applicatie in de browser openen en op de schakelknop klikken om te schakelen tussen de donkere en lichte modi.

Extra opties voor donkere modus in React

Als u wilt dat het thema bij elke paginavernieuwing blijft bestaan, kunt u: gebruik de localStorage API om de gegevens op te slaan. Om dit te doen, moet u eerst de volgende code aan uw toepassing toevoegen:

importeren Reageren, { useState, useEffect } van 'Reageer';
importeren './darkMode.css';
functieApp() {
const [thema, setTheme] = useState(
 localStorage.getItem('thema') || 'licht'
 );
const toggleThema = () => {
 als (thema 'licht') {
 setThema('donker');
 } anders {
 setThema('licht');
 }
 };
 gebruikEffect(() => {
 localStorage.setItem('thema', thema);
document.body.className = thema;
 }, [thema]);
opbrengst (
'App' ${thema}`}>
<knop onClick={toggleTheme}>Thema wisselen</button>
<h1>Hallo Wereld!</h1>
</div>
 );
}
exporterenstandaard App;

Het bovenstaande codefragment bevat de mogelijkheid om het thema te behouden nadat de pagina is vernieuwd. Dit wordt gedaan met behulp van de localStorage API. Ten eerste controleert het of er een thema is opgeslagen in localStorage.

Als er een thema is, wordt dat thema gebruikt. Zo niet, dan wordt het thema 'licht' gebruikt. Vervolgens wordt code toegevoegd aan de useEffect hook om het thema op te slaan in localStorage. Dit zorgt ervoor dat het thema behouden blijft bij het vernieuwen van pagina's.

Donkere modus eindigt niet in Reageren

Er zijn veel manieren waarop u de donkere modus aan uw React-toepassing kunt toevoegen. In dit artikel wordt een manier getoond om dit te doen met behulp van de useState en useEffect hooks. Er zijn echter ook veel andere manieren waarop u dit kunt doen.

U kunt bijvoorbeeld de React Context API gebruiken om een ​​themaprovider te maken. Hiermee kunt u uw hele applicatie in een themaprovidercomponent verpakken en overal in uw applicatie toegang krijgen tot het thema.

U kunt ook de donkere modus in uw browser inschakelen en CSS-mediaquery's gebruiken om verschillende stijlen toe te passen, afhankelijk van het browserthema.