Come aggiungere un tema in modalità oscura alla tua app React

Non c'è dubbio che la modalità oscura sia di gran moda in questi giorni. Sempre più applicazioni offrono la possibilità di passare a un tema scuro e per una buona ragione. Se stai cercando di aggiungere la modalità oscura alla tua applicazione React, ci sono alcune cose che dovrai fare. In questo articolo imparerai come aggiungere la modalità oscura a un'applicazione React usando gli hook useState e useEffect.

Qual è la modalità oscura?

La modalità scura è un tema che cambia la tavolozza dei colori di un'applicazione da chiara a scura. Al giorno d'oggi, la maggior parte delle applicazioni ha la possibilità di passare dalla modalità chiara a quella scura. Questo può essere utile per coloro che preferiscono lavorare in un ambiente buio o per coloro che trovano più facile per gli occhi.

Perché usare la modalità oscura?

Esistono diversi motivi per cui potresti voler utilizzare la modalità oscura nella tua applicazione React. Diamo un'occhiata ad alcuni dei più popolari.

1. Migliora la durata della batteria

Uno dei vantaggi della modalità oscura è che può aiutare a migliorare la durata della batteria sui dispositivi con display OLED o AMOLED. Questo perché i pixel più scuri richiedono meno potenza per essere visualizzati.

2. Ridurre l'affaticamento degli occhi

Se ti ritrovi a navigare sul Web o a utilizzare app di notte, la modalità oscura può aiutare a ridurre l'affaticamento degli occhi. Questo perché diminuisce la quantità di luce bianca o blu brillante emessa dallo schermo.

3. Crea un'esperienza più coinvolgente

Alcune persone trovano che la modalità oscura crei un'esperienza più coinvolgente. Ciò può essere particolarmente vero quando si utilizzano app o siti Web con molti contenuti, come app di notizie o social media.

Come aggiungere la modalità oscura a un'applicazione React

L'aggiunta della modalità oscura a un'applicazione React è relativamente semplice. I passaggi necessari per aggiungere la modalità oscura all'applicazione React sono elencati di seguito.

Prima di iniziare, devi assicurarti di avere a Configurazione dell'applicazione Reagire.

1. Usa l'hook useState

La prima cosa che devi fare è creare una variabile di stato per tenere traccia del tema corrente della tua applicazione. Questo può essere fatto usando l'hook useState. Per questo, dovresti avere una conoscenza di base di come lavorare con l'hook useState.

importare Reagisci, { useState } da 'reagire';
funzioneApp() {
 const [tema, setTheme] = useState('luce');
Restituzione (
`App ${tema}`}>
<h1>Ciao mondo!</h1>
</div>
 );
}
esportarepredefinito App;

Il frammento di codice importa l'hook useState da React e crea una variabile di stato chiamata theme. La variabile del tema tiene traccia del tema corrente dell'applicazione, che il codice imposta su "luce" per impostazione predefinita.

2. Aggiungi un pulsante di commutazione

Successivamente, aggiungi un pulsante di commutazione all'applicazione in modo che gli utenti possano passare dalla modalità chiara a quella scura. Questo può essere fatto con il seguente codice:

importare Reagisci, { useState } da 'reagire';
funzioneApp() {
 const [tema, setTheme] = useState('luce');
cost toggleTema = () => {
 se (tema 'luce') {
 setTheme('scuro');
 } altro {
 setTheme('luce');
 }
 };
Restituzione (
`App ${tema}`}>
<button onClick={toggleTheme}>Attiva/disattiva tema</button>
<h1>Ciao mondo!</h1>
</div>
 );
}
esportarepredefinito App;

Il frammento di codice sopra include una funzione toggleTheme per modificare la variabile di stato del tema tra "chiaro" e "scuro", nonché un pulsante per chiamare la funzione toggleTheme quando viene cliccato.

3. Usa il gancio useEffect

Quindi, usa l'hook useEffect per aggiornare dinamicamente il tema dell'applicazione in base alla variabile di stato del tema.

importare Reagisci, {useState, useEffect} da 'reagire';
funzioneApp() {
 const [tema, setTheme] = useState('luce');
cost toggleTema = () => {
 se (tema 'luce') {
 setTheme('scuro');
 } altro {
 setTheme('luce');
 }
 };
 useEffect(() => {
documento.body.className = tema;
 }, [tema]);
Restituzione (
`App ${tema}`}>
<button onClick={toggleTheme}>Attiva/disattiva tema</button>
<h1>Ciao mondo!</h1>
</div>
 );
}
esportarepredefinito App;

Il frammento di codice sopra usa l'hook useEffect per aggiornare il className dell'elemento document.body in base alla variabile di stato del tema. Ciò consente di aggiornare dinamicamente il CSS dell'applicazione in base al tema.

4. Aggiunta del CSS per le modalità Dark e Light

Quindi, aggiungi il CSS per le modalità scuro e chiaro. Puoi farlo creando un file chiamato "darkMode.css" e aggiungendo il seguente CSS:

.scuro {
 colore di sfondo: #333;
 colore: #F F F;
}
.luce {
 colore di sfondo: #F F F;
 colore: #333;
}

Successivamente, dovrai importare il file CSS nella tua applicazione. Questo può essere fatto con il seguente codice:

importare Reagisci, {useState, useEffect} da 'reagire';
importare './darkMode.css';
funzioneApp() {
 const [tema, setTheme] = useState('luce');
cost toggleTema = () => {
 se (tema 'luce') {
 setTheme('scuro');
 } altro {
 setTheme('luce');
 }
 };
 useEffect(() => {
documento.body.className = tema;
 }, [tema]);
Restituzione (
`App ${tema}`}>
<button onClick={toggleTheme}>Attiva/disattiva tema</button>
<h1>Ciao mondo!</h1>
</div>
 );
}
esportarepredefinito App;

5. Passa a diverse modalità

Ora che hai aggiunto il CSS per le modalità scuro e chiaro, puoi passare da una all'altra facendo clic sul pulsante di attivazione/disattivazione. Per fare ciò, devi prima avviare il server di sviluppo. Puoi farlo eseguendo il seguente comando da terminale:

npm inizio

Successivamente, puoi aprire l'applicazione nel browser e fare clic sul pulsante di attivazione/disattivazione per passare dalla modalità scura a quella chiara.

Opzioni aggiuntive per la modalità oscura in React

Se vuoi che il tema persista durante gli aggiornamenti della pagina, puoi farlo utilizzare l'API localStorage per archiviare i dati. Per fare ciò, devi prima aggiungere il seguente codice alla tua applicazione:

importare Reagisci, {useState, useEffect} da 'reagire';
importare './darkMode.css';
funzioneApp() {
cost [tema, setTheme] = useState(
 localStorage.getItem('tema') || 'luce'
 );
cost toggleTema = () => {
 se (tema 'luce') {
 setTheme('scuro');
 } altro {
 setTheme('luce');
 }
 };
 useEffect(() => {
 localStorage.setItem('tema', tema);
documento.body.className = tema;
 }, [tema]);
Restituzione (
`App ${tema}`}>
<button onClick={toggleTheme}>Attiva/disattiva tema</button>
<h1>Ciao mondo!</h1>
</div>
 );
}
esportarepredefinito App;

Lo snippet di codice sopra include la possibilità di mantenere il tema dopo l'aggiornamento della pagina. Questo viene fatto utilizzando l'API localStorage. Innanzitutto, verifica se è presente un tema archiviato in localStorage.

Se esiste un tema, viene utilizzato quel tema. In caso contrario, viene utilizzato il tema "luce". Successivamente, il codice viene aggiunto all'hook useEffect per archiviare il tema in localStorage. Ciò garantisce che il tema venga mantenuto durante gli aggiornamenti della pagina.

La modalità oscura non finisce con Reagire

Esistono molti modi per aggiungere la modalità oscura all'applicazione React. In questo articolo viene mostrato un modo per farlo utilizzando gli hook useState e useEffect. Tuttavia, ci sono molti altri modi in cui puoi farlo.

Ad esempio, puoi utilizzare l'API React Context per creare un provider di temi. Ciò ti consentirebbe di racchiudere l'intera applicazione in un componente del provider di temi e di accedere al tema ovunque nell'applicazione.

Puoi anche abilitare la modalità oscura sul tuo browser e utilizzare le query multimediali CSS per applicare stili diversi a seconda del tema del browser.