Het is populair geworden voor applicaties om een instelling te hebben waarmee je kunt schakelen tussen donkere en lichte modi. Misschien komt het door de populariteit van donkere gebruikersinterfaces, misschien komt het doordat apps geleidelijk meer configureerbaar worden.
React-context is een gemakkelijke manier om gegevens wereldwijd te delen, maar het kan het hergebruik van componenten bemoeilijken. Als alternatief kunt u een knopcomponent in de donkere modus bouwen die de useEffect- en useState-haken gebruikt in plaats van context. Het schakelt een data-attribuut in op het body-element dat CSS-stijlen kunnen targeten.
Wat je nodig hebt
Om deze zelfstudie te volgen, hebt u het volgende nodig:
- Een recente versie van Node die op uw computer is geïnstalleerd.
- Een basiskennis van React en Reageerhaken.
- Een starters React-project. Alleen maar maak een React-app en je bent klaar om te gaan.
Een knopcomponent maken
De knopcomponent is verantwoordelijk voor het omschakelen van het thema van donker naar licht. In een echte toepassing kan deze knop deel uitmaken van de Navbar-component.
Maak in de src-map een nieuw bestand met de naam Button.js en voeg de volgende code toe.
importeren { useState } van 'Reageer'exporterenstandaardfunctieKnop() {
const [thema, settheme] = useState("donker")
const handvatToggle = () => {
const nieuwThema = thema "licht"? "donker": "licht"
settheme (nieuwTheme)
}
opbrengst (
<>
<knop className="themaBtn" onClick={handleToggle}>
{thema "licht"? <span>donker</span>: <span>licht</span>}
</button>
</>
)
}
Importeer eerst de useState() hook uit React. U zult het gebruiken om het huidige thema bij te houden.
Initialiseer in het onderdeel Knop de status naar donker. De functie handleToggle() zorgt voor de schakelfunctionaliteit. Het wordt uitgevoerd elke keer dat op de knop wordt geklikt.
Deze component schakelt ook de knoptekst in wanneer het thema wordt gewijzigd.
Om de component Button weer te geven, importeert u deze in App.js.
importeren Knop van './Knop';
functieApp() {
opbrengst (
<div>
<Knop/>
</div>
);
}
exporterenstandaard App;
De CSS-stijlen maken
Op dit moment verandert het klikken op de knop de gebruikersinterface van de React-app niet. Daarvoor moet u eerst de CSS-stijlen voor de donkere en lichte modus maken.
Voeg in App.css het volgende toe.
lichaam {
--kleur-tekst-primair: #131616;
--kleur-tekst-secundair: #ff6b00;
--kleur-bg-primair: #E6EDEE;
--kleur-bg-secundair: #7d86881c;
achtergrond: var(--color-bg-primair);
kleur: var(--kleur-tekst-primair);
overgang: achtergrond 0.25sgemak-in-uit;
}
body[data-theme="licht"] {
--kleur-tekst-primair: #131616;
--kleur-bg-primair: #E6EDEE;
}
body[data-theme="donker"] {
--kleur-tekst-primair: #F2F5F7;
--kleur-bg-primair: #0E141B;
}
Hier definieert u de stijlen van het body-element met behulp van gegevensattributen. Er is het data-attribuut voor het lichte thema en het data-attribuut voor het donkere thema. Elk van hen heeft CSS-variabelen met verschillende kleuren. Door CSS-gegevensattributen te gebruiken, kunt u de stijlen wijzigen op basis van de gegevens. Als een gebruiker een donker thema selecteert, kunt u het lichaamsgegevensattribuut op donker instellen en zal de gebruikersinterface veranderen.
U kunt ook de stijlen van de knopelementen aanpassen aan het thema.
.themeBtn {
opvulling: 10px;
kleur: var(--kleur-tekst-primair);
achtergrond: transparant;
grens: 1px vast var(--kleur-tekst-primair);
cursor: aanwijzer;
}
Wijzig de knopcomponent om van stijl te wisselen
Om de stijlen die in het CSS-bestand zijn gedefinieerd te wisselen, moet u de gegevens in het body-element in de functie handleToggle() instellen.
Wijzig in Button.js handleToggle() als volgt:
const handvatToggle = () => {
const nieuwThema = thema "licht"? "donker": "licht"
settheme (nieuwTheme)
document.body.dataset.theme = thema
}
Als u op de knop klikt, moet de achtergrond wisselen van donker naar licht of van licht naar donker. Als u de pagina echter vernieuwt, wordt het thema opnieuw ingesteld. Om de thema-instelling te behouden, slaat u de themavoorkeur op in lokale opslag.
Aanhoudende gebruikersvoorkeur in lokale opslag
U moet de gebruikersvoorkeur ophalen zodra de component Button wordt weergegeven. De useEffect() hook is hier perfect voor omdat deze na elke render wordt uitgevoerd.
Voordat u het thema uit de lokale opslag haalt, moet u het eerst opslaan.
Maak een nieuwe functie met de naam storeUserPreference() in Button.js.
const storeUserSetPreference = (pref) => {
localStorage.setItem("thema", voorkeur);
};
Deze functie ontvangt de gebruikersvoorkeur als argument en slaat deze op als een item met de naam thema.
U roept deze functie elke keer dat de gebruiker het thema verandert aan. Wijzig dus de functie handleToggle() om er als volgt uit te zien:
const handvatToggle = () => {
const nieuwThema = thema "licht"? "donker": "licht"
settheme (nieuwTheme)
storeUserSetPreference (newTheme)
document.body.dataset.theme = thema
}
De volgende functie haalt het thema op uit de lokale opslag:
const getUserSetPreference = () => {
return localStorage.getItem("thema");
};
Je gebruikt het in de useEffect-hook, dus elke keer dat het onderdeel wordt weergegeven, haalt het de voorkeur op uit de lokale opslag om het thema bij te werken.
gebruikEffect(() => {
const userSetPreference = getUserSetPreference();
if (userSetPreference) {
settheme (userSetPreference)
}
document.body.dataset.theme = thema
}, [thema])
Gebruikersvoorkeuren verkrijgen via browserinstellingen
Voor een nog betere gebruikerservaring kunt u de geeft de voorkeur aan-kleurenschema CSS-mediafunctie om het thema in te stellen. Dit moet de systeeminstellingen van een gebruiker weerspiegelen die ze kunnen beheren via hun besturingssysteem of browser. De instelling kan licht of donker zijn. In uw toepassing zou u deze instelling onmiddellijk moeten controleren nadat de knopcomponent is geladen. Dit betekent het implementeren van deze functionaliteit in de useEffect() hook.
Maak eerst een functie die de gebruikersvoorkeur ophaalt.
Voeg in Button.js het volgende toe.
const getMediaQueryPreference = () => {
const mediaQuery = "(voorkeur voor kleurenschema: donker)";
const mql = venster.matchMedia (mediaQuery);
const heeftVoorkeur = soort van mql. komt overeen met "boolean";
if (heeft Voorkeur) {
mql.matches retourneren? "donker": "licht";
}
};
Wijzig vervolgens de hook useEffect() om de voorkeur voor mediaquery's op te halen en gebruik deze als er geen thema is ingesteld in de lokale opslag.
gebruikEffect(() => {
const userSetPreference = getUserSetPreference();
const mediaQueryPreference = getMediaQueryPreference();if (userSetPreference) {
settheme (userSetPreference)
} anders {
settheme (mediaQueryPreference)
}
document.body.dataset.theme = thema
}, [thema])
Als u uw toepassing opnieuw start, moet het thema overeenkomen met de instellingen van uw systeem.
Reageercontext gebruiken om de donkere modus in te schakelen
U kunt gegevensattributen, CSS en React-haken gebruiken om het thema van een React-toepassing te wisselen.
Een andere benadering voor het omgaan met de donkere modus in React is om de context-API te gebruiken. Met React-context kunt u gegevens tussen componenten delen zonder deze via rekwisieten te hoeven doorgeven. Wanneer u het gebruikt om tussen thema's te schakelen, maakt u een themacontext waartoe u overal in de toepassing toegang toe heeft. U kunt vervolgens de themawaarde gebruiken om overeenkomende stijlen toe te passen.
Hoewel deze aanpak werkt, is het gebruik van CSS-gegevensattributen eenvoudiger.