Det råder ingen tvekan om att mörkt läge är på modet nu för tiden. Fler och fler applikationer erbjuder möjligheten att byta till ett mörkt tema, och det av goda skäl. Om du vill lägga till mörkt läge i din React-applikation finns det några saker du behöver göra. I den här artikeln kommer du att lära dig hur du lägger till mörkt läge i en React-applikation med hjälp av useState och useEffect-krokarna.

Vad är det mörka läget?

Det mörka läget är ett tema som växlar färgpaletten för en applikation från ljus till mörk. Nuförtiden har de flesta applikationer möjlighet att växla mellan ljusa och mörka lägen. Detta kan vara till hjälp för dem som föredrar att arbeta i en mörk miljö, eller för dem som tycker att det är lättare för ögonen.

Varför använda mörkt läge?

Det finns ett antal anledningar till varför du kanske vill använda mörkt läge i din React-applikation. Låt oss ta en titt på några av de mest populära.

1. Förbättra batteritiden

En av fördelarna med det mörka läget är att det kan hjälpa till att förbättra batteritiden på enheter med OLED- eller AMOLED-skärmar. Detta beror på att mörkare pixlar kräver mindre ström för att visa.

instagram viewer

2. Minska ögonbelastningen

Om du kommer på att du surfar på webben eller använder appar på natten kan det mörka läget hjälpa till att minska påfrestningarna på ögonen. Detta beror på att det minskar mängden starkt vitt eller blått ljus som sänds ut från skärmen.

3. Skapa en mer uppslukande upplevelse

Vissa människor tycker att mörkt läge skapar en mer uppslukande upplevelse. Detta kan särskilt gälla när du använder appar eller webbplatser med mycket innehåll, till exempel nyhetsappar eller sociala medier.

Hur man lägger till mörkt läge i en React-applikation

Att lägga till mörkt läge i en React-applikation är relativt enkelt. De steg som krävs för att lägga till mörkt läge i din React-applikation listas nedan.

Innan vi börjar måste du se till att du har en Konfigurera React-applikationen.

1. Använd useState Hook

Det första du behöver göra är att skapa en tillståndsvariabel för att spåra det aktuella temat för din applikation. Detta kan göras med hjälp av useState-kroken. För detta bör du ha en grundläggande förståelse för hur man arbetar med useState-kroken.

importera Reagera, { useState } från 'reagera';
fungeraApp() {
 const [theme, setTheme] = useState('ljus');
lämna tillbaka (
`App ${theme}`}>
<h1>Hej världen!</h1>
</div>
 );
}
exporterastandard App;

Kodavsnittet importerar useState-kroken från React och skapar en tillståndsvariabel som kallas theme. Temavariabeln spårar programmets aktuella tema, som koden ställer in på "light" som standard.

2. Lägg till en växlingsknapp

Lägg sedan till en växlingsknapp i applikationen så att användare kan växla mellan ljust och mörkt läge. Detta kan göras med följande kod:

importera Reagera, { useState } från 'reagera';
fungeraApp() {
 const [theme, setTheme] = useState('ljus');
konst toggleTheme = () => {
 om (tema 'ljus') {
 setTheme('mörk');
 } annan {
 setTheme('ljus');
 }
 };
lämna tillbaka (
`App ${theme}`}>
<button onClick={toggleTheme}>Växla tema</button>
<h1>Hej världen!</h1>
</div>
 );
}
exporterastandard App;

Kodavsnittet ovan innehåller en toggleTheme-funktion för att ändra tematillståndsvariabeln mellan 'ljus' och 'mörk', samt en knapp för att anropa toggleTheme-funktionen när du klickar på den.

3. Använd useEffect Hook

Använd sedan useEffect-kroken för att dynamiskt uppdatera programmets tema baserat på tematillståndsvariabeln.

importera Reagera, { useState, useEffect } från 'reagera';
fungeraApp() {
 const [theme, setTheme] = useState('ljus');
konst toggleTheme = () => {
 om (tema 'ljus') {
 setTheme('mörk');
 } annan {
 setTheme('ljus');
 }
 };
 useEffect(() => {
dokumentera.body.className = tema;
 }, [tema]);
lämna tillbaka (
`App ${theme}`}>
<button onClick={toggleTheme}>Växla tema</button>
<h1>Hej världen!</h1>
</div>
 );
}
exporterastandard App;

Kodavsnittet ovan använder useEffect-kroken för att uppdatera className för elementet document.body baserat på tematillståndsvariabeln. Detta gör att du dynamiskt kan uppdatera applikationens CSS baserat på temat.

4. Lägger till CSS för mörka och ljusa lägen

Lägg sedan till CSS för mörka och ljusa lägen. Du kan göra detta genom att skapa en fil som heter 'darkMode.css' och lägga till följande CSS:

.mörk {
 bakgrundsfärg: #333;
 Färg: #fff;
}
.ljus {
 bakgrundsfärg: #fff;
 Färg: #333;
}

Efter det måste du importera CSS-filen till din applikation. Detta kan göras med följande kod:

importera Reagera, { useState, useEffect } från 'reagera';
importera './darkMode.css';
fungeraApp() {
 const [theme, setTheme] = useState('ljus');
konst toggleTheme = () => {
 om (tema 'ljus') {
 setTheme('mörk');
 } annan {
 setTheme('ljus');
 }
 };
 useEffect(() => {
dokumentera.body.className = tema;
 }, [tema]);
lämna tillbaka (
`App ${theme}`}>
<button onClick={toggleTheme}>Växla tema</button>
<h1>Hej världen!</h1>
</div>
 );
}
exporterastandard App;

5. Växla till olika lägen

Nu när du har lagt till CSS för mörka och ljusa lägen kan du växla mellan dem genom att klicka på växlingsknappen. För att göra detta måste du först starta utvecklingsservern. Du kan göra detta genom att köra följande terminalkommando:

npm Start

Efter det kan du öppna applikationen i webbläsaren och klicka på växlingsknappen för att växla mellan mörkt och ljust läge.

Ytterligare alternativ för mörkt läge i React

Om du vill att temat ska kvarstå över siduppdateringar kan du använd localStorage API för att lagra data. För att göra detta måste du först lägga till följande kod i din applikation:

importera Reagera, { useState, useEffect } från 'reagera';
importera './darkMode.css';
fungeraApp() {
konst [theme, setTheme] = useState(
 localStorage.getItem('tema') || 'ljus'
 );
konst toggleTheme = () => {
 om (tema 'ljus') {
 setTheme('mörk');
 } annan {
 setTheme('ljus');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
dokumentera.body.className = tema;
 }, [tema]);
lämna tillbaka (
`App ${theme}`}>
<button onClick={toggleTheme}>Växla tema</button>
<h1>Hej världen!</h1>
</div>
 );
}
exporterastandard App;

Kodavsnittet ovan inkluderar möjligheten att behålla temat efter att sidan har uppdaterats. Detta görs med hjälp av localStorage API. Först kontrollerar den om det finns ett tema lagrat i localStorage.

Om det finns ett tema används det temat. Om inte, används "ljus"-temat. Därefter läggs kod till useEffect-kroken för att lagra temat i localStorage. Detta säkerställer att temat kvarstår över siduppdateringar.

Mörkt läge slutar inte i React

Det finns många sätt du kan lägga till mörkt läge i din React-applikation. I den här artikeln visas ett sätt att göra det med hjälp av hakarna useState och useEffect. Men det finns många andra sätt du kan göra det också.

Du kan till exempel använda React Context API för att skapa en temaleverantör. Detta skulle tillåta dig att slå in hela din applikation i en temaleverantörskomponent och komma åt temat var som helst i din applikation.

Du kan också aktivera mörkt läge i din webbläsare och använda CSS-mediefrågor för att tillämpa olika stilar beroende på webbläsarens tema.