Es besteht kein Zweifel, dass der Dark Mode heutzutage der letzte Schrei ist. Immer mehr Anwendungen bieten die Möglichkeit, zu einem dunklen Thema zu wechseln, und das aus gutem Grund. Wenn Sie Ihrer React-Anwendung den Dunkelmodus hinzufügen möchten, müssen Sie einige Dinge tun. In diesem Artikel erfahren Sie, wie Sie mithilfe der Hooks useState und useEffect den Dunkelmodus zu einer React-Anwendung hinzufügen.

Was ist der Dunkelmodus?

Der Dunkelmodus ist ein Thema, das die Farbpalette einer Anwendung von hell auf dunkel umschaltet. Heutzutage haben die meisten Anwendungen die Möglichkeit, zwischen hellen und dunklen Modi zu wechseln. Dies kann für diejenigen hilfreich sein, die es vorziehen, in einer dunklen Umgebung zu arbeiten, oder für diejenigen, die es angenehmer für die Augen finden.

Warum den Dunkelmodus verwenden?

Es gibt eine Reihe von Gründen, warum Sie den Dunkelmodus in Ihrer React-Anwendung verwenden möchten. Werfen wir einen Blick auf einige der beliebtesten.

1. Verbessern Sie die Akkulaufzeit

instagram viewer

Einer der Vorteile des Dunkelmodus besteht darin, dass er dazu beitragen kann, die Akkulaufzeit auf Geräten mit OLED- oder AMOLED-Displays zu verbessern. Dies liegt daran, dass dunklere Pixel weniger Energie zum Anzeigen benötigen.

2. Reduzieren Sie die Belastung der Augen

Wenn Sie nachts im Internet surfen oder Apps verwenden, kann der Dunkelmodus dazu beitragen, die Belastung der Augen zu verringern. Dies liegt daran, dass die Menge an hellem weißem oder blauem Licht, die vom Bildschirm ausgestrahlt wird, verringert wird.

3. Schaffen Sie ein immersiveres Erlebnis

Einige Leute finden, dass der Dunkelmodus ein immersiveres Erlebnis schafft. Dies kann insbesondere dann der Fall sein, wenn Apps oder Websites mit vielen Inhalten verwendet werden, z. B. Nachrichten-Apps oder soziale Medien.

So fügen Sie einer React-Anwendung den Dunkelmodus hinzu

Das Hinzufügen des Dunkelmodus zu einer React-Anwendung ist relativ einfach. Die Schritte, die zum Hinzufügen des Dunkelmodus zu Ihrer React-Anwendung erforderlich sind, sind unten aufgeführt.

Bevor wir beginnen, müssen Sie sicherstellen, dass Sie eine haben Reaktionsanwendung eingerichtet.

1. Verwenden Sie den useState-Hook

Als Erstes müssen Sie eine Zustandsvariable erstellen, um das aktuelle Thema Ihrer Anwendung zu verfolgen. Dies kann mit dem useState-Hook erfolgen. Dazu sollten Sie über ein grundlegendes Verständnis verfügen wie man mit dem useState-Hook arbeitet.

importieren Reagieren, { useState } aus 'reagieren';
FunktionApp() {
 const [Thema, setTheme] = useState('hell');
Rückkehr (
„App ${theme}`}>
<h1>Hallo Welt!</h1>
</div>
 );
}
ExportUrsprünglich Anwendung;

Das Code-Snippet importiert den useState-Hook aus React und erstellt eine Zustandsvariable namens theme. Die Designvariable verfolgt das aktuelle Design der Anwendung, das der Code standardmäßig auf „Light“ setzt.

2. Fügen Sie eine Umschaltfläche hinzu

Als Nächstes fügen Sie der Anwendung eine Umschaltfläche hinzu, damit Benutzer zwischen hellem und dunklem Modus wechseln können. Dies ist mit folgendem Code möglich:

importieren Reagieren, { useState } aus 'reagieren';
FunktionApp() {
 const [Thema, setTheme] = useState('hell');
konst toggleTheme = () => {
 Wenn (Thema 'hell') {
 setTheme('dunkel');
 } anders {
 setTheme('hell');
 }
 };
Rückkehr (
„App ${theme}`}>
<Schaltfläche onClick={toggleTheme}>Thema umschalten</button>
<h1>Hallo Welt!</h1>
</div>
 );
}
ExportUrsprünglich Anwendung;

Das obige Code-Snippet enthält eine toggleTheme-Funktion, um die Statusvariable des Designs zwischen „hell“ und „dunkel“ zu ändern, sowie eine Schaltfläche zum Aufrufen der toggleTheme-Funktion, wenn darauf geklickt wird.

3. Verwenden Sie den useEffect-Hook

Verwenden Sie als nächstes den useEffect-Hook, um das Design der Anwendung basierend auf der Design-Zustandsvariablen dynamisch zu aktualisieren.

importieren Reagieren, { useState, useEffect } aus 'reagieren';
FunktionApp() {
 const [Thema, setTheme] = useState('hell');
konst toggleTheme = () => {
 Wenn (Thema 'hell') {
 setTheme('dunkel');
 } anders {
 setTheme('hell');
 }
 };
 useEffect(() => {
dokumentieren.body.className = Thema;
 }, [Thema]);
Rückkehr (
„App ${theme}`}>
<Schaltfläche onClick={toggleTheme}>Thema umschalten</button>
<h1>Hallo Welt!</h1>
</div>
 );
}
ExportUrsprünglich Anwendung;

Das obige Code-Snippet verwendet den useEffect-Hook, um den className des document.body-Elements basierend auf der Design-Statusvariablen zu aktualisieren. Auf diese Weise können Sie das CSS der Anwendung basierend auf dem Thema dynamisch aktualisieren.

4. Hinzufügen des CSS für den dunklen und den hellen Modus

Als nächstes fügen Sie das CSS für die dunklen und hellen Modi hinzu. Sie können dies tun, indem Sie eine Datei namens „darkMode.css“ erstellen und das folgende CSS hinzufügen:

.dunkel {
 Hintergrundfarbe: #333;
 Farbe: #F f f;
}
.hell {
 Hintergrundfarbe: #F f f;
 Farbe: #333;
}

Danach müssen Sie die CSS-Datei in Ihre Anwendung importieren. Dies ist mit folgendem Code möglich:

importieren Reagieren, { useState, useEffect } aus 'reagieren';
importieren './darkMode.css';
FunktionApp() {
 const [Thema, setTheme] = useState('hell');
konst toggleTheme = () => {
 Wenn (Thema 'hell') {
 setTheme('dunkel');
 } anders {
 setTheme('hell');
 }
 };
 useEffect(() => {
dokumentieren.body.className = Thema;
 }, [Thema]);
Rückkehr (
„App ${theme}`}>
<Schaltfläche onClick={toggleTheme}>Thema umschalten</button>
<h1>Hallo Welt!</h1>
</div>
 );
}
ExportUrsprünglich Anwendung;

5. Wechseln Sie zu verschiedenen Modi

Nachdem Sie nun das CSS für den dunklen und den hellen Modus hinzugefügt haben, können Sie zwischen ihnen wechseln, indem Sie auf die Umschaltfläche klicken. Dazu müssen Sie zunächst den Entwicklungsserver starten. Sie können dies tun, indem Sie den folgenden Terminalbefehl ausführen:

npm Anfang

Danach können Sie die Anwendung im Browser öffnen und auf die Umschaltfläche klicken, um zwischen dem dunklen und hellen Modus zu wechseln.

Zusätzliche Optionen für den Dunkelmodus in React

Wenn Sie möchten, dass das Design über Seitenaktualisierungen hinweg bestehen bleibt, können Sie das tun Verwenden Sie die localStorage-API, um die Daten zu speichern. Dazu müssen Sie Ihrer Anwendung zunächst den folgenden Code hinzufügen:

importieren Reagieren, { useState, useEffect } aus 'reagieren';
importieren './darkMode.css';
FunktionApp() {
konst [Thema, setTheme] = useState(
 localStorage.getItem('Thema') || 'hell'
 );
konst toggleTheme = () => {
 Wenn (Thema 'hell') {
 setTheme('dunkel');
 } anders {
 setTheme('hell');
 }
 };
 useEffect(() => {
 localStorage.setItem('Thema', Thema);
dokumentieren.body.className = Thema;
 }, [Thema]);
Rückkehr (
„App ${theme}`}>
<Schaltfläche onClick={toggleTheme}>Thema umschalten</button>
<h1>Hallo Welt!</h1>
</div>
 );
}
ExportUrsprünglich Anwendung;

Das obige Code-Snippet beinhaltet die Möglichkeit, das Design nach einer Seitenaktualisierung beizubehalten. Dies erfolgt mithilfe der localStorage-API. Zuerst wird überprüft, ob ein Design in localStorage gespeichert ist.

Wenn es ein Thema gibt, wird dieses Thema verwendet. Wenn nicht, wird das Thema „Licht“ verwendet. Als Nächstes wird dem useEffect-Hook Code hinzugefügt, um das Design in localStorage zu speichern. Dadurch wird sichergestellt, dass das Design über Seitenaktualisierungen hinweg beibehalten wird.

Der dunkle Modus endet nicht mit Reagieren

Es gibt viele Möglichkeiten, wie Sie Ihrer React-Anwendung den Dunkelmodus hinzufügen können. In diesem Artikel wird eine Möglichkeit gezeigt, dies mithilfe der Hooks useState und useEffect zu tun. Es gibt jedoch auch viele andere Möglichkeiten, wie Sie dies tun können.

Beispielsweise könnten Sie die React Context API verwenden, um einen Themenanbieter zu erstellen. Auf diese Weise könnten Sie Ihre gesamte Anwendung in eine Designanbieterkomponente einschließen und überall in Ihrer Anwendung auf das Design zugreifen.

Sie können auch den Dunkelmodus in Ihrem Browser aktivieren und CSS-Medienabfragen verwenden, um je nach Design des Browsers unterschiedliche Stile anzuwenden.