Erstellen eines Dark-Mode-Schalters in React mit der Kontext-API

Der Dunkelmodus ist eine unverzichtbare Funktion in modernen Web-Apps. Es verbessert das Benutzererlebnis und kann die Belastung der Augen verringern. In diesem Beitrag erfahren Sie, wie Sie mithilfe der Kontext-API einen Dark Mode Toggle in einer React-App implementieren, um den Status global zu verwalten.

Wir erstellen eine einfache App, in der Benutzer zwischen dunklem und hellem Modus wechseln können, wobei ihre Präferenz im localStorage gespeichert wird, sodass sie auch dann bestehen bleibt, wenn sie die Seite verlassen oder neu laden.

Schritt 1: Richten Sie den Kontext ein

Der erste Schritt besteht darin, einen ThemeContext zu erstellen, der den Dunkelmodusstatus und die Umschaltfunktion für jede Komponente in der App bereitstellt.

// src/context/ThemeContext.js
import React, { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(() => {
    const savedMode = localStorage.getItem('dark-mode');
    return savedMode === 'true' || false;
  });

  useEffect(() => {
    localStorage.setItem('dark-mode', darkMode);
    document.body.className = darkMode ? 'dark-mode' : '';
  }, [darkMode]);

  const toggleDarkMode = () => {
    setDarkMode((prevMode) => !prevMode);
  };

  return (
    <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

Hier verwenden wir useState, um das Theme basierend auf localStorage zu initialisieren. useEffect stellt sicher, dass bei jeder Änderung des Themes localStorage aktualisiert wird und die entsprechende Klasse auf das Body-Element angewendet wird.

---

Schritt 2: Erstellen Sie die Toggle-Komponente

Hier verwenden wir useContext, um den darkModevalue und die toggleDarkMode-Funktion aus dem ThemeContext zu nutzen.

// src/components/ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

const ThemeToggle = () => {
  const { darkMode, toggleDarkMode } = useContext(ThemeContext);

  return (
    <button onClick={toggleDarkMode}>
      {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    </button>
  );
};

export default ThemeToggle;

---

Schritt 3: Wenden Sie Dark Mode-Stile an

Um den Dunkelmodus in Aktion zu sehen, müssen Sie einige CSS-Stile hinzufügen. Der Einfachheit halber wenden wir ein dunkles Thema auf das Körperelement an.

/* src/styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background-color: #121212;
  color: white;
}

---

Schritt 4: Richten Sie die App-Komponente ein

Hier verpacken wir die gesamte App in den ThemeProvider, wodurch der Dunkelmodusstatus und die Umschaltfunktion global verfügbar sind.

// src/App.js
import React from 'react';
import { ThemeProvider } from './context/ThemeContext';
import ThemeToggle from './components/ThemeToggle';
import './styles.css';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>Dark Mode Toggle with Context API</h1>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

export default App;

---

Durch die Verwendung der Kontext-API von React haben wir den Dunkelmodus-Status in der gesamten App ohne Bohren mit Requisiten leicht zugänglich gemacht. Durch das Hinzufügen von localStorage wird sichergestellt, dass die Designpräferenz auch nach dem Neuladen oder erneuten Besuch der Seite erhalten bleibt.

Fühlen Sie sich frei, diese grundlegende Implementierung zu optimieren, indem Sie je nach Bedarf weitere Komponenten und Stile hinzufügen.

Wenn Sie mehr von meiner Arbeit sehen möchten, schauen Sie sich mein Portfolio vrushikvisavadiya an

Das obige ist der detaillierte Inhalt vonErstellen eines Dark-Mode-Schalters in React mit der Kontext-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!