Det har blitt populært for programmer å ha en innstilling som lar deg veksle mellom mørk og lys modus. Kanskje det er på grunn av populariteten til mørke brukergrensesnitt, kanskje det er fordi apper gradvis blir mer konfigurerbare.
React-kontekst er en enkel måte å dele data globalt på, men det kan gjøre gjenbruk av komponenter vanskeligere. Som et alternativ kan du bygge en mørk modus-knappkomponent som bruker useEffect- og useState-krokene i stedet for kontekst. Det vil bytte et dataattributt på body-elementet som CSS-stiler kan målrettes mot.
Hva du trenger
For å følge med på denne opplæringen, trenger du følgende:
- En nylig versjon av Node installert på maskinen din.
- En grunnleggende forståelse av React og Reager kroker.
- Et starter React-prosjekt. Bare lage en React-app og du er klar til å gå.
Lag en knappekomponent
Knappekomponenten vil være ansvarlig for å bytte tema fra mørkt til lyst. I et ekte program kan denne knappen være en del av Navbar-komponenten.
Opprett en ny fil kalt Button.js i src-mappen og legg til følgende kode.
import { useState } fra 'reagere'eksportmisligholdefunksjonKnapp() {
const [tema, settheme] = brukState("mørk")
konst handleToggle = () => {
const newTheme = tema "lys"? "mørk": "lys"
settheme (nytt tema)
}
komme tilbake (
<>
<knappen klassenavn="temaBtn" onClick={handleToggle}>
{tema "lys"? <span>mørk</span>: <span>lys</span>}
</button>
</>
)
}
Først importerer du useState()-kroken fra React. Du vil bruke den til å holde styr på gjeldende tema.
I Button-komponenten initialiserer du tilstanden til mørk. HandleToggle()-funksjonen vil ta seg av vekslingsfunksjonaliteten. Den kjører hver gang du klikker på knappen.
Denne komponenten bytter også på knappeteksten når den endrer tema.
For å vise Button-komponenten importerer du den til App.js.
import Knapp fra './Knapp';
funksjonApp() {
komme tilbake (
<div>
<Knapp/>
</div>
);
}
eksportmisligholde App;
Lag CSS-stiler
Akkurat nå endrer ikke brukergrensesnittet til React-appen å klikke på knappen. For det må du først lage CSS-stilene for mørk og lys modus.
I App.css legger du til følgende.
kropp {
--farge-tekst-primær: #131616;
--farge-tekst-sekundær: #ff6b00;
--farge-bg-primær: #E6EDEE;
--farge-bg-sekundær: #7d86881c;
bakgrunn: var(--farge-bg-primær);
farge: var(--farge-tekst-primær);
overgang: bakgrunn 0.25slette inn-ut;
}
body[data-tema="lys"] {
--farge-tekst-primær: #131616;
--farge-bg-primær: #E6EDEE;
}
body[data-tema="mørk"] {
--farge-tekst-primær: #F2F5F7;
--farge-bg-primær: #0E141B;
}
Her definerer du stilene til body-elementet ved hjelp av dataattributter. Det er lystemadataattributtet og mørkt temadataattributt. Hver av dem har CSS-variabler med forskjellige farger. Ved å bruke CSS-dataattributter kan du bytte stiler i henhold til dataene. Hvis en bruker velger et mørkt tema, kan du sette kroppsdataattributtet til mørkt og brukergrensesnittet endres.
Du kan også endre knappeelementstilene for å endre med temaet.
.themeBtn {
polstring: 10px;
farge: var(--farge-tekst-primær);
bakgrunn: gjennomsiktig;
grense: 1px solid var(--farge-tekst-primær);
markør: peker;
}
Endre knappekomponent for å veksle mellom stiler
For å veksle mellom stilene som er definert i CSS-filen, må du angi dataene i body-elementet i handleToggle()-funksjonen.
I Button.js, endre handleToggle() slik:
konst handleToggle = () => {
const newTheme = tema "lys"? "mørk": "lys"
settheme (nytt tema)
dokument.body.dataset.theme = tema
}
Hvis du klikker på knappen, skal bakgrunnen veksle fra mørk til lys eller lys til mørk. Men hvis du oppdaterer siden, tilbakestilles temaet. For å opprettholde temainnstillingen, lagre temapreferansen i lokal lagring.
Vedvarende brukerpreferanse i lokal lagring
Du bør hente brukerpreferansen så snart Button-komponenten gjengis. UseEffect()-kroken er perfekt for dette siden den kjører etter hver gjengivelse.
Før du henter temaet fra den lokale lagringen, må du lagre det først.
Opprett en ny funksjon kalt storeUserPreference() i Button.js.
konst storeUserSetPreference = (pref) => {
localStorage.setItem("tema", pref);
};
Denne funksjonen mottar brukerpreferansen som et argument og lagrer den som et element kalt tema.
Du vil kalle denne funksjonen hver gang brukeren bytter tema. Så, endre handleToggle()-funksjonen til å se slik ut:
konst handleToggle = () => {
const newTheme = tema "lys"? "mørk": "lys"
settheme (nytt tema)
storeUserSetPreference (nytt tema)
dokument.body.dataset.theme = tema
}
Følgende funksjon henter temaet fra lokal lagring:
konst getUserSetPreference = () => {
returner localStorage.getItem("tema");
};
Du vil bruke den i useEffect-kroken, så hver gang komponenten renderes, henter den preferansen fra lokal lagring for å oppdatere temaet.
useEffect(() => {
konst userSetPreference = getUserSetPreference();
if (userSetPreference) {
settheme (userSetPreference)
}
dokument.body.dataset.theme = tema
}, [tema])
Få brukerpreferanser fra nettleserinnstillinger
For en enda bedre brukeropplevelse kan du bruke foretrekker-fargeskjema CSS-mediefunksjon for å angi temaet. Dette bør gjenspeile en brukers systeminnstillinger som de kan kontrollere via operativsystemet eller nettleseren. Innstillingen kan enten være lys eller mørk. I applikasjonen din må du sjekke denne innstillingen umiddelbart etter at knappekomponenten er lastet inn. Dette betyr å implementere denne funksjonaliteten i useEffect()-kroken.
Lag først en funksjon som henter brukerpreferansen.
I Button.js legger du til følgende.
konst getMediaQueryPreference = () => {
const mediaQuery = "(foretrekker-fargeskjema: mørk)";
konst mql = vindu.matchMedia (mediaQuery);
konst hasPreference = type mql.matches "boolean";
if (hasPreference) {
returnere mql.matches? "mørk": "lys";
}
};
Deretter endrer du useEffect()-kroken for å hente mediespørringspreferansen og bruk den hvis det ikke er angitt noe tema i den lokale lagringen.
useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();if (userSetPreference) {
settheme (userSetPreference)
} ellers {
settheme (mediaQueryPreference)
}
dokument.body.dataset.theme = tema
}, [tema])
Hvis du starter programmet på nytt, bør temaet samsvare med systemets innstillinger.
Bruke React Context for å veksle mellom mørk modus
Du kan bruke dataattributter, CSS og React-kroker for å bytte tema for en React-applikasjon.
En annen tilnærming til å håndtere mørk modus i React er å bruke kontekst-API. React-kontekst lar deg dele data på tvers av komponenter uten å måtte sende det ned gjennom rekvisitter. Når du bruker den til å veksle mellom temaer, oppretter du en temakontekst som du har tilgang til i hele applikasjonen. Du kan deretter bruke temaverdien til å bruke matchende stiler.
Selv om denne tilnærmingen fungerer, er det enklere å bruke CSS-dataattributter.
