Det er blevet populært for applikationer at have en indstilling, der lader dig skifte mellem mørk og lys tilstand. Måske skyldes det populariteten af ​​mørke brugergrænseflader, måske er det fordi apps gradvist bliver mere konfigurerbare.

React-kontekst er en nem måde at dele data på globalt, men det kan gøre genbrug af komponenter vanskeligere. Som et alternativ kan du bygge en mørk tilstandsknapkomponent, der bruger useEffect- og useState-krogene i stedet for kontekst. Det vil skifte en dataattribut på kropselementet, som CSS-stile kan målrettes mod.

Hvad du skal bruge

For at følge med i denne tutorial skal du bruge følgende:

  • En nyere version af Node installeret på din maskine.
  • En grundlæggende forståelse af React og Reager kroge.
  • Et starter React-projekt. Lige oprette en React-app og du er klar til at gå.

Opret en knapkomponent

Knapkomponenten vil være ansvarlig for at skifte temaet fra mørkt til lyst. I et rigtigt program kan denne knap være en del af Navbar-komponenten.

I src-mappen skal du oprette en ny fil kaldet Button.js og tilføje følgende kode.

instagram viewer 
importere { useState } fra 'reagere'
eksportStandardfungereKnap() {
 const [tema, settheme] = useState("mørk")
konst handleToggle = () => {
 const newTheme = tema "lys"? "mørk": "lys"
 settheme (nyt tema)
 }
Vend tilbage (
<>
<knap klassenavn="temaBtn" onClick={handleToggle}>
 {tema "lys"? <span>mørk</span>: <span>lys</span>}
</button>
</>
 )
}

Importer først useState()-krogen fra React. Du vil bruge det til at holde styr på det aktuelle tema.

Initialiser tilstanden til mørk i knapkomponenten. HandleToggle()-funktionen tager sig af skiftefunktionen. Den kører hver gang der trykkes på knappen.

Denne komponent skifter også knapteksten, når den ændrer temaet.

For at få vist Button-komponenten, importer den til App.js.

importere Knap fra './Knap';
fungereApp() {
Vend tilbage (
<div>
<Knap/>
</div>
 );
}
eksportStandard App;

Opret CSS-stilene

Lige nu ændrer et klik på knappen ikke brugergrænsefladen for React-appen. Til det skal du først oprette CSS-stilene til mørk og lys tilstand.

Tilføj følgende i App.css.

krop {
 --farve-tekst-primær: #131616;
 --farve-tekst-sekundær: #ff6b00;
 --farve-bg-primær: #E6EDEE;
 --farve-bg-sekundær: #7d86881c;
 baggrund: var(--farve-bg-primær);
 farve: var(--farve-tekst-primær);
overgang: baggrund 0.25slet ind-ud;
}
body[data-tema="lys"] {
 --farve-tekst-primær: #131616;
 --farve-bg-primær: #E6EDEE;
}
body[data-tema="mørk"] {
 --farve-tekst-primær: #F2F5F7;
 --farve-bg-primær: #0E141B;
}

Her definerer du stilene for kropselementet ved hjælp af dataattributter. Der er dataattributten lystema og dataattributten mørkt tema. Hver af dem har CSS-variabler med forskellige farver. Brug af CSS-dataattributter giver dig mulighed for at skifte stile i overensstemmelse med dataene. Hvis en bruger vælger et mørkt tema, kan du indstille kropsdataattributten til mørk, og brugergrænsefladen ændres.

Du kan også ændre knapelementets stilarter for at ændre med temaet.

.themeBtn {
 polstring: 10px;
 farve: var(--farve-tekst-primær);
 baggrund: gennemsigtig;
 grænse: 1px solid var(--farve-tekst-primær);
 markør: pointer;
}

Rediger knapkomponent for at skifte typografier

For at skifte mellem de stilarter, der er defineret i CSS-filen, skal du indstille dataene i body-elementet i handleToggle()-funktionen.

I Button.js skal du ændre handleToggle() på denne måde:

konst handleToggle = () => {
 const newTheme = tema "lys"? "mørk": "lys"
 settheme (nyt tema)
dokument.body.dataset.theme = tema
}

Hvis du klikker på knappen, skal baggrunden skifte fra mørk til lys eller lys til mørk. Men hvis du opdaterer siden, nulstilles temaet. For at bevare temaindstillingen skal du gemme temapræferencen i lokal opbevaring.

Vedvarende brugerpræference i lokal lagring

Du bør hente brugerpræferencen, så snart Button-komponenten gengives. UseEffect()-krogen er perfekt til dette, da den kører efter hver gengivelse.

Før du henter temaet fra det lokale lager, skal du først gemme det.

Opret en ny funktion kaldet storeUserPreference() i Button.js.

konst storeUserSetPreference = (præf) => {
 localStorage.setItem("tema", præf);
};

Denne funktion modtager brugerpræferencen som et argument og gemmer den som et element kaldet tema.

Du vil kalde denne funktion, hver gang brugeren skifter temaet. Så rediger handleToggle()-funktionen til at se sådan ud:

konst handleToggle = () => {
 const newTheme = tema "lys"? "mørk": "lys"
 settheme (nyt tema)
 storeUserSetPreference (nyt tema)
dokument.body.dataset.theme = tema
}

Følgende funktion henter temaet fra lokal lagring:

konst getUserSetPreference = () => {
 returner localStorage.getItem("tema");
};

Du vil bruge det i useEffect-krogen, så hver gang komponenten gengives, henter den præferencen fra det lokale lager for at opdatere temaet.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
dokument.body.dataset.theme = tema
}, [tema])

Hent brugerpræferencer fra browserindstillinger

For en endnu bedre brugeroplevelse kan du bruge foretrækker-farve-skema CSS-mediefunktion til at indstille temaet. Dette bør afspejle en brugers systemindstillinger, som de kan kontrollere via deres OS eller browser. Indstillingen kan enten være lys eller mørk. I din applikation skal du kontrollere denne indstilling umiddelbart efter, at knapkomponenten er indlæst. Dette betyder at implementere denne funktionalitet i useEffect()-krogen.

Først skal du oprette en funktion, der henter brugerens præference.

Tilføj følgende i Button.js.

konst getMediaQueryPreference = () => {
 const mediaQuery = "(foretrækker-farve-skema: mørk)";
konst mql = vindue.matchMedia (mediaQuery);
konst har præference = type mql.matches "boolean";
if (har præference) {
 returnere mql.matches? "mørk": "lys";
 }
};

Derefter skal du ændre useEffect()-krogen for at hente medieforespørgselspræferencen og bruge den, hvis der ikke er indstillet et tema i det lokale lager.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } andet {
 settheme (mediaQueryPreference)
 }
dokument.body.dataset.theme = tema
}, [tema])

Hvis du genstarter din applikation, skal temaet matche dit systems indstillinger.

Brug af React Context til at skifte mellem mørk tilstand

Du kan bruge dataattributter, CSS og React hooks til at skifte temaet for en React-applikation.

En anden tilgang til at håndtere mørk tilstand i React er at bruge kontekst-API'en. React-kontekst giver dig mulighed for at dele data på tværs af komponenter uden at skulle videregive dem gennem rekvisitter. Når du bruger det til at skifte mellem temaer, opretter du en temakontekst, som du kan få adgang til i hele applikationen. Du kan derefter bruge temaværdien til at anvende matchende typografier.

Selvom denne tilgang virker, er det nemmere at bruge CSS-dataattributter.