Sovelluksissa on suosittu asetus, jonka avulla voit vaihtaa tumman ja vaalean tilan välillä. Ehkä se johtuu tummien käyttöliittymien suosiosta, ehkä siitä, että sovellukset ovat vähitellen konfiguroitavampia.
React konteksti on helppo tapa jakaa tietoja maailmanlaajuisesti, mutta se voi vaikeuttaa komponenttien uudelleenkäyttöä. Vaihtoehtoisesti voit rakentaa pimeän tilan painikekomponentin, joka käyttää useEffect- ja useState-koukkuja kontekstin sijaan. Se vaihtaa data-attribuutin body-elementissä, johon CSS-tyylit voivat kohdistaa.
Mitä tarvitset
Jotta voit seurata tätä opetusohjelmaa, tarvitset seuraavat:
- Koneeseesi asennettu Noden uusin versio.
- Perustiedot Reactista ja Reagoi koukut.
- Aloittava React-projekti. Vain luo React-sovellus ja olet valmis lähtemään.
Luo painikekomponentti
Painikekomponentti vastaa teeman vaihtamisesta tummasta vaaleaan. Oikeassa sovelluksessa tämä painike saattaa olla osa Navbar-komponenttia.
Luo src-kansioon uusi tiedosto nimeltä Button.js ja lisää seuraava koodi.
tuonti { useState } alkaen 'reagoi'viedäoletuksenatoimintoPainike() {
const [teema, settheme] = useState("tumma")
konst HandToggle = () => {
const uusiTeema = teema "valoa"? "tumma": "valoa"
asetateema (uusi teema)
}
palata (
<>
<painike className="teemaBtn" onClick={handleToggle}>
{teema "valoa"? <jänneväli>tumma</span>: <jänneväli>valoa</span>}
</button>
</>
)
}
Tuo ensin useState()-koukku Reactista. Käytät sitä nykyisen teeman seuraamiseen.
Alusta Painike-komponentin tila tummaksi. HandleToggle()-funktio huolehtii vaihtotoiminnosta. Se toimii joka kerta, kun painiketta napsautetaan.
Tämä komponentti vaihtaa myös painikkeen tekstiä, kun se muuttaa teemaa.
Tuo Button-komponentti näkyviin App.js-tiedostoon.
tuonti Painike alkaen './Button';
toimintoSovellus() {
palata (
<div>
<Painike/>
</div>
);
}
viedäoletuksena Sovellus;
Luo CSS-tyylit
Tällä hetkellä painikkeen napsauttaminen ei muuta React-sovelluksen käyttöliittymää. Tätä varten sinun on ensin luotava CSS-tyylit tummaa ja vaaleaa tilaa varten.
Lisää App.css: ssä seuraava.
body {
--väri-teksti-ensisijainen: #131616;
--väri-teksti-toissijainen: #ff6b00;
--color-bg-primary: #E6EDEE;
--color-bg-secondary: #7d86881c;
tausta: var(--väri-bg-ensisijainen);
väri: var(--väri-teksti-ensisijainen);
siirtyminen: tausta 0.25shelppous sisään-ulos;
}
body[data-teema="valoa"] {
--väri-teksti-ensisijainen: #131616;
--color-bg-primary: #E6EDEE;
}
body[data-teema="tumma"] {
--väri-teksti-ensisijainen: #F2F5F7;
--color-bg-primary: #0E141B;
}
Tässä määrität body-elementin tyylit dataattribuuttien avulla. On light theme data -attribuutti ja tumma teema -dattribuutti. Jokaisessa niistä on CSS-muuttujia eri väreillä. CSS-tietoattribuuttien avulla voit vaihtaa tyylejä tietojen mukaan. Jos käyttäjä valitsee tumman teeman, voit asettaa body data -määritteeksi tumman, jolloin käyttöliittymä muuttuu.
Voit myös muokata painikeelementtien tyylejä muuttumaan teeman mukaan.
.themeBtn {
täyte: 10px;
väri: var(--väri-teksti-ensisijainen);
tausta: läpinäkyvä;
raja: 1px kiinteä var(--väri-teksti-ensisijainen);
kohdistin: osoitin;
}
Muokkaa painikkeen komponenttia vaihtaaksesi tyylejä
Jos haluat vaihtaa CSS-tiedostossa määritettyjä tyylejä, sinun on asetettava body-elementin tiedot handleToggle()-funktiossa.
Muokkaa Button.js: ssa handleToggle() seuraavasti:
konst HandToggle = () => {
const uusiTeema = teema "valoa"? "tumma": "valoa"
asetateema (uusi teema)
asiakirja.body.dataset.theme = teema
}
Jos napsautat painiketta, taustan tulisi vaihtua tummasta vaaleaksi tai vaaleasta tummaan. Jos kuitenkin päivität sivun, teema nollautuu. Jos haluat säilyttää teema-asetuksen, tallenna teema-asetus sisään paikallinen varasto.
Pysyvät käyttäjäasetukset paikallisessa tallennustilassa
Sinun tulee noutaa käyttäjän asetus heti, kun Button-komponentti tulee näkyviin. UseEffect()-koukku on täydellinen tähän, koska se toimii jokaisen renderöinnin jälkeen.
Ennen kuin noutat teeman paikallisesta tallennustilasta, sinun on ensin tallennettava se.
Luo uusi funktio nimeltä storeUserPreference() Button.js: ssa.
konst storeUserSetPreference = (pref) => {
localStorage.setItem("teema", pref);
};
Tämä funktio vastaanottaa käyttäjän valinnan argumenttina ja tallentaa sen kohteena nimeltä teema.
Kutsut tätä toimintoa aina, kun käyttäjä vaihtaa teemaa. Joten muokkaa handleToggle()-funktiota tältä:
konst HandToggle = () => {
const uusiTeema = teema "valoa"? "tumma": "valoa"
asetateema (uusi teema)
storeUserSetPreference (uusi teema)
asiakirja.body.dataset.theme = teema
}
Seuraava toiminto hakee teeman paikallisesta tallennustilasta:
konst getUserSetPreference = () => {
return localStorage.getItem("teema");
};
Käytät sitä useEffect-koukussa, joten joka kerta kun komponentti renderöi, se hakee ensisijaiset asetukset paikallisesta tallennustilasta teeman päivittämiseksi.
useEffect(() => {
konst userSetPreference = getUserSetPreference();
if (userSetPreference) {
settheme (userSetPreference)
}
asiakirja.body.dataset.theme = teema
}, [teema])
Käyttäjäasetusten saaminen selaimen asetuksista
Vielä paremman käyttökokemuksen saamiseksi voit käyttää mieluummin värimalli CSS-mediaominaisuus asettaa teeman. Tämän pitäisi kuvastaa käyttäjän järjestelmäasetuksia, joita hän voi hallita käyttöjärjestelmänsä tai selaimensa kautta. Asetus voi olla joko vaalea tai tumma. Sovelluksessasi sinun on tarkistettava tämä asetus heti painikekomponentin latautumisen jälkeen. Tämä tarkoittaa tämän toiminnon toteuttamista useEffect()-koukussa.
Luo ensin toiminto, joka hakee käyttäjän mieltymykset.
Lisää Button.js-tiedostoon seuraava.
konst getMediaQueryPreference = () => {
const mediaQuery = "(ensisijaisesti värimalli: tumma)";
konst mql = ikkuna.matchMedia (mediaQuery);
konst hasPreference = tyyppi mql.vastaa "boolean";
if (hasPreference) {
palauttaa mql.matches? "tumma": "valoa";
}
};
Muokkaa seuraavaksi useEffect()-koukkua hakemaan mediakyselyasetus ja käytä sitä, jos paikallisessa tallennustilassa ei ole asetettu teemaa.
useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();if (userSetPreference) {
settheme (userSetPreference)
} muu {
asetateema (mediaQueryPreference)
}
asiakirja.body.dataset.theme = teema
}, [teema])
Jos käynnistät sovelluksen uudelleen, teeman tulee vastata järjestelmäsi asetuksia.
Reaktiokontekstin käyttäminen tumman tilan vaihtamiseen
Voit käyttää dataattribuutteja, CSS: ää ja React-koukkuja vaihtaaksesi React-sovelluksen teeman.
Toinen tapa käsitellä pimeää tilaa Reactissa on käyttää konteksti-API: tä. React-konteksti mahdollistaa tietojen jakamisen komponenttien välillä ilman, että sitä tarvitsee välittää rekvisiittajen kautta. Kun käytät sitä teemojen vaihtamiseen, luot teemakontekstin, jota voit käyttää kaikkialla sovelluksessa. Voit sitten käyttää teema-arvoa vastaavien tyylien käyttöön.
Vaikka tämä lähestymistapa toimii, CSS-tietoattribuuttien käyttö on yksinkertaisempaa.