Det er ingen tvil om at mørk modus er på topp i disse dager. Flere og flere applikasjoner tilbyr muligheten til å bytte til et mørkt tema, og med god grunn. Hvis du ønsker å legge til mørk modus i React-applikasjonen din, er det et par ting du må gjøre. I denne artikkelen lærer du hvordan du legger til mørk modus i en React-applikasjon ved å bruke useState- og useEffect-krokene.

Hva er mørk modus?

Den mørke modusen er et tema som bytter fargepaletten til en applikasjon fra lys til mørk. I dag har de fleste applikasjoner muligheten til å bytte mellom lys og mørk modus. Dette kan være nyttig for de som foretrekker å jobbe i mørke omgivelser, eller for de som synes det er lettere for øynene.

Hvorfor bruke mørk modus?

Det er flere grunner til at du kanskje vil bruke mørk modus i React-applikasjonen din. La oss ta en titt på noen av de mest populære.

1. Forbedre batterilevetiden

En av fordelene med mørk modus er at den kan bidra til å forbedre batterilevetiden på enheter med OLED- eller AMOLED-skjermer. Dette er fordi mørkere piksler krever mindre strøm for å vise.

2. Reduser belastningen på øynene

Hvis du finner deg selv å surfe på nettet eller bruke apper om natten, kan mørk modus bidra til å redusere belastningen på øynene. Dette er fordi det reduserer mengden skarpt hvitt eller blått lys som sendes ut fra skjermen.

3. Skap en mer oppslukende opplevelse

Noen opplever at mørk modus skaper en mer oppslukende opplevelse. Dette kan spesielt gjelde når du bruker apper eller nettsider med mye innhold, som nyhetsapper eller sosiale medier.

Hvordan legge til mørk modus til en React-applikasjon

Å legge til mørk modus til en React-applikasjon er relativt enkelt. Trinnene som er nødvendige for å legge til mørk modus til React-applikasjonen din er oppført nedenfor.

Før vi begynner, må du sørge for at du har en Oppsett av React-applikasjonen.

1. Bruk useState Hook

Det første du må gjøre er å lage en tilstandsvariabel for å spore gjeldende tema for applikasjonen din. Dette kan gjøres ved å bruke useState-kroken. For dette bør du ha en grunnleggende forståelse av hvordan jobbe med useState-kroken.

import Reager, { useState } fra 'reagere';
funksjonApp() {
 const [tema, setTema] = brukState('lys');
komme tilbake (
`App ${theme}`}>
<h1>Hei Verden!</h1>
</div>
 );
}
eksportmisligholde App;

Kodebiten importerer useState-kroken fra React og lager en tilstandsvariabel kalt tema. Temavariabelen sporer gjeldende tema for applikasjonen, som koden setter til "light" som standard.

2. Legg til en veksleknapp

Deretter legger du til en veksleknapp i applikasjonen slik at brukere kan bytte mellom lys og mørk modus. Dette kan gjøres med følgende kode:

import Reager, { useState } fra 'reagere';
funksjonApp() {
 const [tema, setTema] = brukState('lys');
konst toggleTheme = () => {
 hvis (tema 'lys') {
 setTheme('mørk');
 } ellers {
 setTheme('lys');
 }
 };
komme tilbake (
`App ${theme}`}>
<button onClick={toggleTheme}>Bytt tema</button>
<h1>Hei Verden!</h1>
</div>
 );
}
eksportmisligholde App;

Kodebiten ovenfor inkluderer en toggleTheme-funksjon for å endre tematilstandsvariabelen mellom 'lys' og 'mørk', samt en knapp for å kalle opp toggleTheme-funksjonen når den klikkes.

3. Bruk useEffect-kroken

Deretter bruker du useEffect-kroken til å dynamisk oppdatere temaet til applikasjonen basert på tematilstandsvariabelen.

import Reager, { useState, useEffect } fra 'reagere';
funksjonApp() {
 const [tema, setTema] = brukState('lys');
konst toggleTheme = () => {
 hvis (tema 'lys') {
 setTheme('mørk');
 } ellers {
 setTheme('lys');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
komme tilbake (
`App ${theme}`}>
<button onClick={toggleTheme}>Bytt tema</button>
<h1>Hei Verden!</h1>
</div>
 );
}
eksportmisligholde App;

Kodebiten ovenfor bruker useEffect-kroken til å oppdatere className til document.body-elementet basert på tematilstandsvariabelen. Dette lar deg dynamisk oppdatere CSS-en til applikasjonen basert på temaet.

4. Legger til CSS for mørk og lys modus

Deretter legger du til CSS for mørke og lyse moduser. Du kan gjøre dette ved å lage en fil kalt 'darkMode.css' og legge til følgende CSS:

.mørk {
 bakgrunnsfarge: #333;
 farge: #fff;
}
.lys {
 bakgrunnsfarge: #fff;
 farge: #333;
}

Etter det må du importere CSS-filen til applikasjonen din. Dette kan gjøres med følgende kode:

import Reager, { useState, useEffect } fra 'reagere';
import './darkMode.css';
funksjonApp() {
 const [tema, setTema] = brukState('lys');
konst toggleTheme = () => {
 hvis (tema 'lys') {
 setTheme('mørk');
 } ellers {
 setTheme('lys');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
komme tilbake (
`App ${theme}`}>
<button onClick={toggleTheme}>Bytt tema</button>
<h1>Hei Verden!</h1>
</div>
 );
}
eksportmisligholde App;

5. Bytt til forskjellige moduser

Nå som du har lagt til CSS for mørke og lyse moduser, kan du bytte mellom dem ved å klikke på veksleknappen. For å gjøre dette må du først starte utviklingsserveren. Du kan gjøre dette ved å kjøre følgende terminalkommando:

npm start

Etter det kan du åpne applikasjonen i nettleseren og klikke på veksleknappen for å bytte mellom mørk og lys modus.

Ytterligere alternativer for mørk modus i React

Hvis du vil at temaet skal vedvare på tvers av sideoppdateringer, kan du bruk localStorage API for å lagre dataene. For å gjøre dette må du først legge til følgende kode i applikasjonen din:

import Reager, { useState, useEffect } fra 'reagere';
import './darkMode.css';
funksjonApp() {
konst [theme, setTheme] = brukState(
 localStorage.getItem('tema') || 'lys'
 );
konst toggleTheme = () => {
 hvis (tema 'lys') {
 setTheme('mørk');
 } ellers {
 setTheme('lys');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
dokument.body.className = tema;
 }, [tema]);
komme tilbake (
`App ${theme}`}>
<button onClick={toggleTheme}>Bytt tema</button>
<h1>Hei Verden!</h1>
</div>
 );
}
eksportmisligholde App;

Kodebiten ovenfor inkluderer muligheten til å beholde temaet etter at siden er oppdatert. Dette gjøres ved å bruke localStorage API. Først sjekker den om det er et tema lagret i localStorage.

Hvis det er et tema, brukes det temaet. Hvis ikke, brukes "lett"-temaet. Deretter legges kode til useEffect-kroken for å lagre temaet i localStorage. Dette sikrer at temaet vedvarer på tvers av sideoppdateringer.

Mørk modus slutter ikke i React

Det er mange måter du kan legge til mørk modus i React-applikasjonen din. I denne artikkelen vises en måte å gjøre det på ved å bruke useState og useEffect-krokene. Det er imidlertid mange andre måter du kan gjøre det på.

Du kan for eksempel bruke React Context API for å lage en temaleverandør. Dette vil tillate deg å pakke hele applikasjonen inn i en temaleverandørkomponent og få tilgang til temaet hvor som helst i applikasjonen.

Du kan også aktivere mørk modus i nettleseren din og bruke CSS-mediespørringer til å bruke forskjellige stiler avhengig av nettleserens tema.