Ei ole epäilystäkään siitä, että tumma tila on muotia nykyään. Yhä useammat sovellukset tarjoavat mahdollisuuden vaihtaa tummaan teemaan, ja hyvästä syystä. Jos haluat lisätä tumman tilan React-sovellukseesi, sinun on tehtävä muutamia asioita. Tässä artikkelissa opit lisäämään tumman tilan React-sovellukseen useState- ja useEffect-koukkujen avulla.

Mikä on tumma tila?

Tumma tila on teema, joka vaihtaa sovelluksen väripaletin vaaleasta tummaan. Nykyään useimmissa sovelluksissa on mahdollisuus vaihtaa vaalean ja pimeän tilan välillä. Tämä voi olla hyödyllistä niille, jotka haluavat työskennellä pimeässä ympäristössä, tai niille, jotka pitävät silmiä helpommin.

Miksi käyttää tummaa tilaa?

On useita syitä, miksi saatat haluta käyttää tummaa tilaa React-sovelluksessasi. Katsotaanpa joitain suosituimmista.

1. Paranna akun käyttöikää

Yksi pimeän tilan eduista on, että se voi parantaa akun käyttöikää laitteissa, joissa on OLED- tai AMOLED-näyttö. Tämä johtuu siitä, että tummemmat pikselit vaativat vähemmän tehoa näyttääkseen.

instagram viewer

2. Vähennä silmien rasitusta

Jos selaat verkkoa tai käytät sovelluksia yöllä, tumma tila voi auttaa vähentämään silmien rasitusta. Tämä johtuu siitä, että se vähentää näytöstä säteilevän kirkkaan valkoisen tai sinisen valon määrää.

3. Luo mukaansatempaavampi kokemus

Jotkut ihmiset huomaavat, että tumma tila luo mukaansatempaavamman kokemuksen. Tämä voi olla erityisen totta, kun käytät sovelluksia tai verkkosivustoja, joissa on paljon sisältöä, kuten uutissovelluksia tai sosiaalista mediaa.

Kuinka lisätä tumma tila React-sovellukseen

Tumman tilan lisääminen React-sovellukseen on suhteellisen helppoa. Tarvittavat vaiheet pimeän tilan lisäämiseksi React-sovellukseesi on lueteltu alla.

Ennen kuin aloitamme, sinun on varmistettava, että sinulla on a Reaktiosovelluksen asetukset.

1. Käytä useState Hookia

Ensimmäinen asia, joka sinun on tehtävä, on luoda tilamuuttuja, joka seuraa sovelluksesi nykyistä teemaa. Tämä voidaan tehdä käyttämällä useState-koukkua. Tätä varten sinulla pitäisi olla perustiedot kuinka käyttää useState-koukkua.

tuonti Reagoi, { useState } alkaen "reagoi";
toimintoSovellus() {
 const [teema, setTheme] = useState('valoa');
palata (
`Sovellus ${theme}`}>
<h1>Hei maailma!</h1>
</div>
 );
}
viedäoletuksena Sovellus;

Koodinpätkä tuo useState-koukun Reactista ja luo tilamuuttujan nimeltä teema. Teemamuuttuja seuraa sovelluksen nykyistä teemaa, jonka koodi asettaa oletuksena "light".

2. Lisää vaihtopainike

Lisää seuraavaksi vaihtopainike sovellukseen, jotta käyttäjät voivat vaihtaa vaalean ja tumman tilan välillä. Tämä voidaan tehdä seuraavalla koodilla:

tuonti Reagoi, { useState } alkaen "reagoi";
toimintoSovellus() {
 const [teema, setTheme] = useState('valoa');
konst toggleTheme = () => {
 jos (teema 'valoa') {
 setTheme('tumma');
 } muu {
 setTheme('valoa');
 }
 };
palata (
`Sovellus ${theme}`}>
<painike onClick={toggleTheme}>Vaihda teema</button>
<h1>Hei maailma!</h1>
</div>
 );
}
viedäoletuksena Sovellus;

Yllä oleva koodinpätkä sisältää toggleTheme-funktion, joka muuttaa teeman tilamuuttujan 'vaalea' ja 'tumma' välillä, sekä painikkeen, joka kutsuu toggleTheme-funktion, kun sitä napsautetaan.

3. Käytä useEffect Hookia

Käytä seuraavaksi useEffect-koukkua päivittääksesi sovelluksen teeman dynaamisesti teeman tilamuuttujan perusteella.

tuonti React, { useState, useEffect } alkaen "reagoi";
toimintoSovellus() {
 const [teema, setTheme] = useState('valoa');
konst toggleTheme = () => {
 jos (teema 'valoa') {
 setTheme('tumma');
 } muu {
 setTheme('valoa');
 }
 };
 useEffect(() => {
asiakirja.body.className = teema;
 }, [teema]);
palata (
`Sovellus ${theme}`}>
<painike onClick={toggleTheme}>Vaihda teema</button>
<h1>Hei maailma!</h1>
</div>
 );
}
viedäoletuksena Sovellus;

Yllä oleva koodinpätkä käyttää useEffect-koukkua document.body-elementin className päivittämiseen teeman tilamuuttujan perusteella. Näin voit päivittää dynaamisesti sovelluksen CSS: n teeman perusteella.

4. CSS: n lisääminen tummaa ja vaaleaa tilaa varten

Lisää seuraavaksi CSS pimeää ja vaaleaa tilaa varten. Voit tehdä tämän luomalla tiedoston nimeltä "darkMode.css" ja lisäämällä seuraavan CSS: n:

.tumma {
 taustaväri: #333;
 väri: #F F F;
}
.valoa {
 taustaväri: #F F F;
 väri: #333;
}

Tämän jälkeen sinun on tuotava CSS-tiedosto sovellukseesi. Tämä voidaan tehdä seuraavalla koodilla:

tuonti React, { useState, useEffect } alkaen "reagoi";
tuonti './darkMode.css';
toimintoSovellus() {
 const [teema, setTheme] = useState('valoa');
konst toggleTheme = () => {
 jos (teema 'valoa') {
 setTheme('tumma');
 } muu {
 setTheme('valoa');
 }
 };
 useEffect(() => {
asiakirja.body.className = teema;
 }, [teema]);
palata (
`Sovellus ${theme}`}>
<painike onClick={toggleTheme}>Vaihda teema</button>
<h1>Hei maailma!</h1>
</div>
 );
}
viedäoletuksena Sovellus;

5. Vaihda eri tiloihin

Nyt kun olet lisännyt CSS: n tummaa ja vaaleaa tilaa varten, voit vaihtaa niiden välillä napsauttamalla vaihtopainiketta. Tätä varten sinun on ensin käynnistettävä kehityspalvelin. Voit tehdä tämän suorittamalla seuraavan terminaalikomennon:

npm alkaa

Tämän jälkeen voit avata sovelluksen selaimessa ja vaihtaa tumman ja vaalean tilan välillä napsauttamalla vaihtopainiketta.

Lisäasetukset tummalle tilalle Reactissa

Jos haluat teeman jatkuvan sivun päivitysten aikana, voit tehdä sen käytä localStorage API: ta tietojen tallentamiseen. Tätä varten sinun on ensin lisättävä sovellukseesi seuraava koodi:

tuonti React, { useState, useEffect } alkaen "reagoi";
tuonti './darkMode.css';
toimintoSovellus() {
konst [teema, setTheme] = useState(
 localStorage.getItem('teema') || 'valoa'
 );
konst toggleTheme = () => {
 jos (teema 'valoa') {
 setTheme('tumma');
 } muu {
 setTheme('valoa');
 }
 };
 useEffect(() => {
 localStorage.setItem('teema', teema);
asiakirja.body.className = teema;
 }, [teema]);
palata (
`Sovellus ${theme}`}>
<painike onClick={toggleTheme}>Vaihda teema</button>
<h1>Hei maailma!</h1>
</div>
 );
}
viedäoletuksena Sovellus;

Yllä oleva koodinpätkä sisältää mahdollisuuden säilyttää teeman sivun päivityksen jälkeen. Tämä tehdään käyttämällä localStorage API: ta. Ensin se tarkistaa, onko localStorageen tallennettu teema.

Jos on teema, sitä käytetään. Jos ei, käytetään "kevyt" teemaa. Seuraavaksi koodi lisätään useEffect-koukkuun teeman tallentamiseksi localStorageen. Tämä varmistaa, että teema säilyy sivun päivitysten aikana.

Tumma tila ei pääty Reactiin

On monia tapoja, joilla voit lisätä tumman tilan React-sovellukseesi. Tässä artikkelissa esitetään yksi tapa tehdä se useState- ja useEffect-koukkujen avulla. On kuitenkin monia muita tapoja, joilla voit tehdä sen.

Voit esimerkiksi käyttää React Context API: ta teemantarjoajan luomiseen. Näin voit kääriä koko sovelluksesi teemantarjoajakomponenttiin ja käyttää teemaa missä tahansa sovelluksessasi.

Voit myös ottaa käyttöön tumman tilan selaimessasi ja käyttää CSS-mediakyselyitä erilaisten tyylien käyttämiseen selaimen teeman mukaan.