È diventato popolare per le applicazioni avere un'impostazione che ti consente di alternare tra le modalità scuro e chiaro. Forse è dovuto alla popolarità delle UI oscure, forse perché le app stanno gradualmente diventando più configurabili.
React context è un modo semplice per condividere i dati a livello globale, ma può rendere più difficile il riutilizzo dei componenti. In alternativa, puoi creare un componente pulsante in modalità oscura che utilizzi gli hook useEffect e useState invece del contesto. Commuterà un attributo di dati sull'elemento body che gli stili CSS possono scegliere come target.
Di cosa avrai bisogno
Per seguire questo tutorial, avrai bisogno di quanto segue:
- Una versione recente di Node installata sulla tua macchina.
- Una comprensione di base di Reagire e Reagire ganci.
- Un progetto React di partenza. Solo creare un'app React e sei pronto per partire.
Crea un componente pulsante
Il componente del pulsante sarà responsabile della commutazione del tema da scuro a chiaro. In un'applicazione reale, questo pulsante potrebbe essere parte del componente Navbar.
Nella cartella src, crea un nuovo file chiamato Button.js e aggiungi il codice seguente.
importare {UsaStato} da 'reagire'esportarepredefinitofunzionePulsante() {
const [tema, settheme] = useState("scuro")
cost handleToggle = () => {
const newTheme = tema "luce"? "scuro": "luce"
settheme (nuovoTema)
}
Restituzione (
<>
<pulsante nomeclasse="temaBtn" onClick={handleToggle}>
{tema "luce"? <intervallo>scuro</span>: <intervallo>luce</span>}
</button>
</>
)
}
Innanzitutto, importa l'hook useState() da React. Lo userai per tenere traccia del tema corrente.
Nel componente Pulsante, inizializza lo stato su scuro. La funzione handleToggle() si occuperà della funzionalità di commutazione. Viene eseguito ogni volta che si fa clic sul pulsante.
Questo componente attiva anche il testo del pulsante quando cambia il tema.
Per visualizzare il componente Button, importalo in App.js.
importare Pulsante da './Pulsante';
funzioneApp() {
Restituzione (
<div>
<Pulsante/>
</div>
);
}
esportarepredefinito App;
Crea gli stili CSS
Al momento, fare clic sul pulsante non cambia l'interfaccia utente dell'app React. Per questo, dovrai prima creare gli stili CSS per la modalità scura e chiara.
In App.css, aggiungi quanto segue.
corpo {
--colore-testo-primario: #131616;
--color-text-secondary: #ff6b00;
--color-bg-primary: #E6EDEE;
--color-bg-secondary: #7d86881c;
sfondo: var(--color-bg-primary);
colore: var(--colore-testo-primario);
transizione: sfondo 0.25sfacilità d'ingresso;
}
corpo[tema-dati="luce"] {
--colore-testo-primario: #131616;
--color-bg-primary: #E6EDEE;
}
corpo[tema-dati="scuro"] {
--colore-testo-primario: #F2F5F7;
--color-bg-primary: #0E141B;
}
Qui stai definendo gli stili dell'elemento body usando gli attributi dei dati. C'è l'attributo dei dati del tema chiaro e l'attributo dei dati del tema scuro. Ognuno di essi ha variabili CSS con colori diversi. L'uso degli attributi dei dati CSS ti consentirà di cambiare gli stili in base ai dati. Se un utente seleziona un tema scuro, puoi impostare l'attributo dei dati del corpo su scuro e l'interfaccia utente cambierà.
Puoi anche modificare gli stili degli elementi del pulsante per cambiarli con il tema.
.temaBtn {
imbottitura: 10px;
colore: var(--colore-testo-primario);
sfondo: trasparente;
confine: 1px solido var(--colore-testo-primario);
cursore: puntatore;
}
Modifica il componente del pulsante per attivare/disattivare gli stili
Per alternare gli stili definiti nel file CSS, dovrai impostare i dati nell'elemento body nella funzione handleToggle().
In Button.js, modifica handleToggle() in questo modo:
cost handleToggle = () => {
const newTheme = tema "luce"? "scuro": "luce"
settheme (nuovoTema)
documento.body.dataset.theme = tema
}
Se fai clic sul pulsante, lo sfondo dovrebbe passare da scuro a chiaro o da chiaro a scuro. Tuttavia, se aggiorni la pagina, il tema viene reimpostato. Per mantenere l'impostazione del tema, salva la preferenza del tema in memoria locale.
Preferenza utente persistente nella memoria locale
Dovresti recuperare la preferenza dell'utente non appena il componente Button esegue il rendering. L'hook useEffect() è perfetto per questo poiché viene eseguito dopo ogni rendering.
Prima di recuperare il tema dalla memoria locale, devi prima memorizzarlo.
Crea una nuova funzione chiamata storeUserPreference() in Button.js.
cost storeUserSetPreference = (pref) => {
localStorage.setItem("tema", pref);
};
Questa funzione riceve la preferenza dell'utente come argomento e la memorizza come elemento chiamato tema.
Chiamerai questa funzione ogni volta che l'utente commuta il tema. Quindi, modifica la funzione handleToggle() in modo che assomigli a questa:
cost handleToggle = () => {
const newTheme = tema "luce"? "scuro": "luce"
settheme (nuovoTema)
storeUserSetPreference (nuovoTema)
documento.body.dataset.theme = tema
}
La seguente funzione recupera il tema dalla memoria locale:
cost getUserSetPreference = () => {
restituisce localStorage.getItem("tema");
};
Lo userai nell'hook useEffect così ogni volta che il componente esegue il rendering, recupera la preferenza dalla memoria locale per aggiornare il tema.
useEffect(() => {
cost userSetPreference = getUserSetPreference();
se (userSetPreference) {
settheme (userSetPreference)
}
documento.body.dataset.theme = tema
}, [tema])
Ottenere le preferenze dell'utente dalle impostazioni del browser
Per un'esperienza utente ancora migliore, puoi utilizzare il preferisce-combinazione di colori Funzione multimediale CSS per impostare il tema. Ciò dovrebbe riflettere le impostazioni di sistema di un utente che possono controllare tramite il proprio sistema operativo o browser. L'impostazione può essere chiara o scura. Nella tua applicazione, dovresti controllare questa impostazione subito dopo il caricamento del componente pulsante. Ciò significa implementare questa funzionalità nell'hook useEffect().
Innanzitutto, crea una funzione che recuperi le preferenze dell'utente.
In Button.js, aggiungi quanto segue.
cost getMediaQueryPreference = () => {
const mediaQuery = "(preferisce la combinazione di colori: scuro)";
cost mql = finestra.matchMedia (mediaQuery);
cost haPreferenza = tipo di mql.matches "booleano";
se (ha Preferenza) {
restituire mql.matches? "scuro": "luce";
}
};
Quindi, modifica l'hook useEffect() per recuperare la preferenza della query multimediale e utilizzarla se non è impostato alcun tema nella memoria locale.
useEffect(() => {
cost userSetPreference = getUserSetPreference();
cost mediaQueryPreference = getMediaQueryPreference();se (userSetPreference) {
settheme (userSetPreference)
} altro {
settheme (mediaQueryPreference)
}
documento.body.dataset.theme = tema
}, [tema])
Se riavvii l'applicazione, il tema dovrebbe corrispondere alle impostazioni del tuo sistema.
Utilizzo del contesto di reazione per attivare la modalità oscura
Puoi utilizzare attributi di dati, CSS e hook React per alternare il tema di un'applicazione React.
Un altro approccio alla gestione della modalità oscura in React consiste nell'utilizzare l'API di contesto. Il contesto di React ti consente di condividere i dati tra i componenti senza doverli trasmettere attraverso gli oggetti di scena. Quando lo usi per alternare i temi, crei un contesto del tema a cui puoi accedere in tutta l'applicazione. È quindi possibile utilizzare il valore del tema per applicare gli stili corrispondenti.
Sebbene questo approccio funzioni, l'utilizzo degli attributi dei dati CSS è più semplice.
