Der er ingen tvivl om, at mørk tilstand er i højsædet i disse dage. Flere og flere applikationer tilbyder muligheden for at skifte til et mørkt tema, og det er der god grund til. Hvis du ønsker at tilføje mørk tilstand til din React-applikation, er der et par ting, du skal gøre. I denne artikel lærer du, hvordan du tilføjer mørk tilstand til en React-applikation ved hjælp af useState- og useEffect-krogene.

Hvad er den mørke tilstand?

Den mørke tilstand er et tema, der skifter farvepaletten for en applikation fra lys til mørk. I dag har de fleste applikationer mulighed for at skifte mellem lys og mørk tilstand. Dette kan være nyttigt for dem, der foretrækker at arbejde i mørke omgivelser, eller for dem, der har lettere ved øjnene.

Hvorfor bruge mørk tilstand?

Der er en række grunde til, at du måske vil bruge mørk tilstand i din React-applikation. Lad os tage et kig på nogle af de mest populære.

1. Forbedre batterilevetiden

En af fordelene ved den mørke tilstand er, at den kan hjælpe med at forbedre batterilevetiden på enheder med OLED- eller AMOLED-skærme. Dette skyldes, at mørkere pixels kræver mindre strøm at vise.

instagram viewer

2. Reducer øjenbelastning

Hvis du finder dig selv at surfe på nettet eller bruge apps om natten, kan den mørke tilstand hjælpe med at reducere øjenbelastningen. Dette er fordi det mindsker mængden af ​​skarpt hvidt eller blåt lys, der udsendes fra skærmen.

3. Skab en mere fordybende oplevelse

Nogle mennesker oplever, at mørk tilstand skaber en mere fordybende oplevelse. Dette kan især være tilfældet, når du bruger apps eller hjemmesider med meget indhold, såsom nyhedsapps eller sociale medier.

Sådan tilføjes mørk tilstand til en React-applikation

Det er relativt enkelt at tilføje mørk tilstand til en React-applikation. De nødvendige trin for at tilføje mørk tilstand til din React-applikation er angivet nedenfor.

Før vi går i gang, skal du sikre dig, at du har en Opsætning af React-applikation.

1. Brug useState Hook

Den første ting, du skal gøre, er at oprette en tilstandsvariabel for at spore det aktuelle tema for din applikation. Dette kan gøres ved hjælp af useState-krogen. Til dette bør du have en grundlæggende forståelse for hvordan man arbejder med useState-krogen.

importere Reager, { useState } fra 'reagere';
fungereApp() {
 const [theme, setTheme] = useState('lys');
Vend tilbage (
`App ${theme}`}>
<h1>Hej Verden!</h1>
</div>
 );
}
eksportStandard App;

Kodestykket importerer useState-hook fra React og opretter en tilstandsvariabel kaldet theme. Temavariablen sporer det aktuelle tema for applikationen, som koden indstiller til 'light' som standard.

2. Tilføj en skifteknap

Tilføj derefter en skifteknap til applikationen, så brugerne kan skifte mellem lys og mørk tilstand. Dette kan gøres med følgende kode:

importere Reager, { useState } fra 'reagere';
fungereApp() {
 const [theme, setTheme] = useState('lys');
konst toggleTheme = () => {
 hvis (tema 'lys') {
 sætTema('mørk');
 } andet {
 sætTema('lys');
 }
 };
Vend tilbage (
`App ${theme}`}>
<knap onClick={toggleTheme}>Skift tema</button>
<h1>Hej Verden!</h1>
</div>
 );
}
eksportStandard App;

Kodestykket ovenfor inkluderer en toggleTheme-funktion til at ændre tematilstandsvariablen mellem 'lys' og 'mørk', samt en knap til at kalde toggleTheme-funktionen, når der klikkes på den.

3. Brug useEffect Hook

Brug derefter useEffect-krogen til dynamisk at opdatere applikationens tema baseret på tematilstandsvariablen.

importere Reager, { useState, useEffect } fra 'reagere';
fungereApp() {
 const [theme, setTheme] = useState('lys');
konst toggleTheme = () => {
 hvis (tema 'lys') {
 sætTema('mørk');
 } andet {
 sætTema('lys');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
Vend tilbage (
`App ${theme}`}>
<knap onClick={toggleTheme}>Skift tema</button>
<h1>Hej Verden!</h1>
</div>
 );
}
eksportStandard App;

Kodestykket ovenfor bruger useEffect-krogen til at opdatere className for elementet document.body baseret på tematilstandsvariablen. Dette giver dig mulighed for dynamisk at opdatere applikationens CSS baseret på temaet.

4. Tilføjelse af CSS for mørk og lys tilstand

Tilføj derefter CSS for mørke og lyse tilstande. Du kan gøre dette ved at oprette en fil kaldet 'darkMode.css' og tilføje følgende CSS:

.mørk {
 baggrundsfarve: #333;
 farve: #fff;
}
.lys {
 baggrundsfarve: #fff;
 farve: #333;
}

Derefter skal du importere CSS-filen til din applikation. Dette kan gøres med følgende kode:

importere Reager, { useState, useEffect } fra 'reagere';
importere './darkMode.css';
fungereApp() {
 const [theme, setTheme] = useState('lys');
konst toggleTheme = () => {
 hvis (tema 'lys') {
 sætTema('mørk');
 } andet {
 sætTema('lys');
 }
 };
 useEffect(() => {
dokument.body.className = tema;
 }, [tema]);
Vend tilbage (
`App ${theme}`}>
<knap onClick={toggleTheme}>Skift tema</button>
<h1>Hej Verden!</h1>
</div>
 );
}
eksportStandard App;

5. Skift til forskellige tilstande

Nu hvor du har tilføjet CSS for mørke og lyse tilstande, kan du skifte mellem dem ved at klikke på til/fra-knappen. For at gøre dette skal du først starte udviklingsserveren. Du kan gøre dette ved at køre følgende terminalkommando:

npm Start

Derefter kan du åbne applikationen i browseren og klikke på skifteknappen for at skifte mellem mørke og lyse tilstande.

Yderligere muligheder for mørk tilstand i React

Hvis du ønsker, at temaet skal fortsætte på tværs af sideopdateringer, kan du det bruge localStorage API til at gemme dataene. For at gøre dette skal du først tilføje følgende kode til din applikation:

importere Reager, { useState, useEffect } fra 'reagere';
importere './darkMode.css';
fungereApp() {
konst [theme, setTheme] = useState(
 localStorage.getItem('tema') || 'lys'
 );
konst toggleTheme = () => {
 hvis (tema 'lys') {
 sætTema('mørk');
 } andet {
 sætTema('lys');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
dokument.body.className = tema;
 }, [tema]);
Vend tilbage (
`App ${theme}`}>
<knap onClick={toggleTheme}>Skift tema</button>
<h1>Hej Verden!</h1>
</div>
 );
}
eksportStandard App;

Kodestykket ovenfor inkluderer muligheden for at beholde temaet efter sideopdateringer. Dette gøres ved at bruge localStorage API. Først tjekker den for at se, om der er et tema gemt i localStorage.

Hvis der er et tema, bruges det tema. Hvis ikke, bruges 'light'-temaet. Dernæst tilføjes kode til useEffect-krogen for at gemme temaet i localStorage. Dette sikrer, at temaet forbliver på tværs af sideopdateringer.

Mørk tilstand ender ikke i React

Der er mange måder, du kan tilføje mørk tilstand til din React-applikation. I denne artikel er en måde at gøre det på ved hjælp af useState og useEffect-krogene vist. Der er dog mange andre måder, du også kan gøre det på.

For eksempel kan du bruge React Context API til at oprette en temaudbyder. Dette vil give dig mulighed for at pakke hele din applikation ind i en temaudbyderkomponent og få adgang til temaet hvor som helst i din applikation.

Du kan også aktivere mørk tilstand på din browser og bruge CSS-medieforespørgsler til at anvende forskellige stilarter afhængigt af browserens tema.