Es wird immer beliebter, dass Anwendungen eine Einstellung haben, mit der Sie zwischen dunklem und hellem Modus umschalten können. Vielleicht liegt es an der Popularität von Dark UIs, vielleicht daran, dass Apps nach und nach konfigurierbarer werden.

Der React-Kontext ist eine einfache Möglichkeit, Daten global auszutauschen, kann jedoch die Wiederverwendung von Komponenten erschweren. Als Alternative können Sie eine Schaltflächenkomponente für den dunklen Modus erstellen, die die Hooks useEffect und useState anstelle des Kontexts verwendet. Es schaltet ein Datenattribut für das body-Element um, auf das CSS-Stile abzielen können.

Was du brauchen wirst

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

  • Eine aktuelle Version von Node, die auf Ihrem Computer installiert ist.
  • Ein grundlegendes Verständnis von React and Haken reagieren.
  • Ein Starter-React-Projekt. Gerade Erstellen Sie eine React-App und schon kann es losgehen.

Erstellen Sie eine Schaltflächenkomponente

Die Schaltflächenkomponente ist dafür verantwortlich, das Design von dunkel auf hell umzuschalten. In einer realen Anwendung könnte diese Schaltfläche Teil der Navbar-Komponente sein.

Erstellen Sie im Ordner src eine neue Datei mit dem Namen Button.js und fügen Sie den folgenden Code hinzu.

importieren { useState } aus 'reagieren'
ExportUrsprünglichFunktionTaste() {
 const [theme, settheme] = useState("dunkel")
konst handleToggle = () => {
 const newTheme = Thema "hell"? "dunkel": "hell"
 settheme (neues Thema)
 }
Rückkehr (
<>
<Schaltfläche Klassenname="themeBtn" onClick={handleToggle}>
 {Thema "hell"? <Spanne>dunkel</span>: <Spanne>hell</span>}
</button>
</>
 )
}

Importieren Sie zuerst den useState()-Hook von React. Sie werden es verwenden, um das aktuelle Thema im Auge zu behalten.

Initialisieren Sie in der Button-Komponente den Zustand auf dunkel. Die Funktion handleToggle() kümmert sich um die Umschaltfunktionalität. Es wird jedes Mal ausgeführt, wenn auf die Schaltfläche geklickt wird.

Diese Komponente schaltet auch den Schaltflächentext um, wenn sie das Design ändert.

Um die Button-Komponente anzuzeigen, importieren Sie sie in App.js.

importieren Taste aus './Taste';
FunktionApp() {
Rückkehr (
<div>
<Taste/>
</div>
 );
}
ExportUrsprünglich Anwendung;

Erstellen Sie die CSS-Stile

Im Moment ändert das Klicken auf die Schaltfläche die Benutzeroberfläche der React-App nicht. Dazu müssen Sie zunächst die CSS-Stile für den dunklen und den hellen Modus erstellen.

Fügen Sie in App.css Folgendes hinzu.

Karosserie {
 --color-text-primary: #131616;
 --color-text-secondary: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-sekundär: #7d86881c;
 Hintergrund: Var(--color-bg-primary);
 Farbe: Var(--color-text-primary);
Überleitung: Hintergrund 00,25 SekLeichtigkeit-in-out;
}
body[data-theme="hell"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
body[data-theme="dunkel"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

Hier definieren Sie die Stile des Body-Elements mithilfe von Datenattributen. Es gibt das Datenattribut für helle Themen und das Datenattribut für dunkle Themen. Jeder von ihnen hat CSS-Variablen mit unterschiedlichen Farben. Durch die Verwendung von CSS-Datenattributen können Sie die Stile entsprechend den Daten wechseln. Wenn ein Benutzer ein dunkles Thema auswählt, können Sie das Körperdatenattribut auf dunkel setzen und die Benutzeroberfläche ändert sich.

Sie können auch die Schaltflächenelementstile ändern, um sie mit dem Thema zu ändern.

.themeBtn {
 Polsterung: 10px;
 Farbe: Var(--color-text-primary);
 Hintergrund: transparent;
 Grenze: 1px fest Var(--color-text-primary);
 Cursor: Zeiger;
}

Ändern Sie die Schaltflächenkomponente, um Stile umzuschalten

Um die in der CSS-Datei definierten Stile umzuschalten, müssen Sie die Daten im body-Element in der Funktion handleToggle() festlegen.

Ändern Sie in Button.js handleToggle() wie folgt:

konst handleToggle = () => {
 const newTheme = Thema "hell"? "dunkel": "hell"
 settheme (neues Thema)
dokumentieren.body.dataset.theme = Thema
}

Wenn Sie auf die Schaltfläche klicken, sollte der Hintergrund von dunkel zu hell oder von hell zu dunkel wechseln. Wenn Sie die Seite jedoch aktualisieren, wird das Design zurückgesetzt. Um die Designeinstellung beizubehalten, speichern Sie die Designeinstellung in lokaler Speicher.

Beständige Benutzereinstellung im lokalen Speicher

Sie sollten die Benutzereinstellung abrufen, sobald die Button-Komponente gerendert wird. Der Hook useEffect() ist dafür perfekt, da er nach jedem Rendern ausgeführt wird.

Bevor Sie das Design aus dem lokalen Speicher abrufen, müssen Sie es zuerst speichern.

Erstellen Sie eine neue Funktion namens storeUserPreference() in Button.js.

konst storeUserSetPreference = (pref) => {
 localStorage.setItem("Thema", bevorzugt);
};

Diese Funktion empfängt die Benutzerpräferenz als Argument und speichert sie als Element namens theme.

Sie rufen diese Funktion jedes Mal auf, wenn der Benutzer das Design umschaltet. Ändern Sie also die Funktion handleToggle() so, dass sie wie folgt aussieht:

konst handleToggle = () => {
 const newTheme = Thema "hell"? "dunkel": "hell"
 settheme (neues Thema)
 storeUserSetPreference (neues Thema)
dokumentieren.body.dataset.theme = Thema
}

Die folgende Funktion ruft das Design aus dem lokalen Speicher ab:

konst getUserSetPreference = () => {
 localStorage.getItem zurückgeben ("Thema");
};

Sie verwenden es im useEffect-Hook, damit die Komponente jedes Mal, wenn sie rendert, die Einstellung aus dem lokalen Speicher abruft, um das Design zu aktualisieren.

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

Abrufen der Benutzereinstellungen aus den Browsereinstellungen

Für eine noch bessere Benutzererfahrung können Sie die verwenden bevorzugt-Farbschema CSS-Medienfunktion zum Festlegen des Themas. Dies sollte die Systemeinstellungen eines Benutzers widerspiegeln, die er über sein Betriebssystem oder seinen Browser steuern kann. Die Einstellung kann entweder hell oder dunkel sein. In Ihrer Anwendung müssten Sie diese Einstellung unmittelbar nach dem Laden der Schaltflächenkomponente überprüfen. Dies bedeutet, dass diese Funktionalität im useEffect()-Hook implementiert wird.

Erstellen Sie zunächst eine Funktion, die die Benutzereinstellung abruft.

Fügen Sie in Button.js Folgendes hinzu.

konst getMediaQueryPreference = () => {
 const mediaQuery = "(bevorzugt-Farbschema: dunkel)";
konst ml = Fenster.matchMedia (Medienabfrage);
konst hasPreference = Art der mql.matches "boolean";
if (hasPreference) {
 gib mql.matches zurück? "dunkel": "hell";
 }
};

Ändern Sie als Nächstes den Hook useEffect(), um die Präferenz für die Medienabfrage abzurufen, und verwenden Sie sie, wenn im lokalen Speicher kein Design festgelegt ist.

useEffect(() => {
konst userSetPreference = getUserSetPreference();
konst mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } anders {
 settheme (mediaQueryPreference)
 }
dokumentieren.body.dataset.theme = Thema
}, [Thema])

Wenn Sie Ihre Anwendung neu starten, sollte das Design mit den Einstellungen Ihres Systems übereinstimmen.

Verwenden von React Context zum Umschalten des Dunkelmodus

Sie können Datenattribute, CSS und React-Hooks verwenden, um das Design einer React-Anwendung umzuschalten.

Ein weiterer Ansatz zur Handhabung des Dunkelmodus in React ist die Verwendung der Kontext-API. Der React-Kontext ermöglicht es Ihnen, Daten über Komponenten hinweg zu teilen, ohne sie über Requisiten weitergeben zu müssen. Wenn Sie es zum Umschalten von Themen verwenden, erstellen Sie einen Themenkontext, auf den Sie in der gesamten Anwendung zugreifen können. Sie können dann den Designwert verwenden, um passende Stile anzuwenden.

Während dieser Ansatz funktioniert, ist die Verwendung von CSS-Datenattributen einfacher.