Einfacher dunkler Modus (und mehrere Farbthemen!) In React

Dieser Leitfaden zeigt eine einfache Implementierung des Dark -Modus in einer Reaktionsanwendung, die sich auf die Benutzerfreundlichkeit und das Onboarding von Team konzentriert. Es vermeidet komplexe CSS -Strategien und nutzt CSS -Variablen und Datenattribute für eine saubere, effiziente Lösung.

Die Herausforderung, Stile zu verwalten und den Dunklen Modus in einem großen React -Projekt zu implementieren, führt häufig zu komplexen Lösungen. Während viele Optionen existieren, verlassen sie sich häufig auf bestimmte CSS -Methoden oder -Rahmenbedingungen. Dieser Ansatz priorisiert Einfachheit und Geschwindigkeit und macht ihn ideal für Teams unterschiedlicher Fähigkeiten.

Eine verbesserte Methode, die CSS-Variablen mit dem useLocalStorage Hook kombiniert, bietet ein robustes und benutzerfreundliches Theming-System. Dieses Tutorial führt Sie durch die Einrichtung und Ausführung dieses Systems von Grund auf und zeigt seine Effektivität in einer neuen React -App. Darüber hinaus zeigt es die Integration mit react-scoped-css für die verbesserte CSS-Organisation.

Projekt -Setup

Dieser Leitfaden setzt eine grundlegende Vertrautheit mit CSS, JavaScript und React an. Stellen Sie sicher, dass Sie Knoten und NPM installiert haben. Erstellen Sie eine neue React -App mit:

 npx erstellen reages-app-Easy-React-Themen-Template TypeScript

(Ersetzen Sie easy-react-themes durch Ihren Projektnamen; aushilfe von --template typescript für JavaScript). Öffnen Sie das Projekt in Ihrem Code-Editor (z. B. VS Code mit cd easy-react-themes; code . ) Und starten Sie den Entwicklungsserver ( npm start ). Endlich installieren Sie use-local-storage :

 NPM I Gebrauchslokal-Storage

Code -Implementierung

Löschen Sie den Inhalt von App.css . Definieren Sie in index.css Ihre Themen mithilfe von CSS -Variablen:

 :Wurzel {
  -Background: Weiß;
  --Text-Primary: Schwarz;
  --Textsekundär: Royalblue;
  -Accent: Lila;
}
[data-theme = 'dark'] {
  -Background: Schwarz;
  --Text-Primary: Weiß;
  --Textsekundär: Grau;
  -Accent: dunkel;
}

Dies verwendet CSS -benutzerdefinierte Eigenschaften (Variablen) und Datenattribute. Der Selektor [data-theme='dark'] überschreibt die :root Variablen, wenn das data-theme -Attribut auf 'Dark' gesetzt ist.

In App.tsx , importieren Sie useLocalStorage :

 uselocalStorage importieren von 'nutzlokalstorage';

Dann verwalten Sie Themenstatus:

 const defaultDark = window.matchmedia ('(bevorzugt Farbscheme: Dunkel).).
const [thema, settheme] = uselocalstorage ('thema', defaultDark? 'dark': 'light');

Dies verwendet useLocalStorage , um die Themenauswahl über die Sessions hinweg in Bezug auf die Browserpräferenzen hinweg zu bestehen. Das data-theme -Attribut wird auf die oberste Ebene angewendet<div> :<pre class="brush:php;toolbar:false">&lt;div data-theme=&quot;{theme}&quot;&gt; {/ * Ihr App -Inhalt hier */} &lt;/div&gt;</pre> <p>Stylen Sie Ihre Komponenten in <code>App.css mit den CSS -Variablen:

 .App {
  Farbe: var (-Text-Primary);
  Hintergrundfarbe: var (-Hintergrund);
  / * ... andere Stile ... */
  Übergang: alle .5s;
}
Taste {
  / * ... Schaltflächenstile mit CSS -Variablen ... */
  Übergang: alle .5s;
}

Dies stellt sicher, dass die Styles reibungslos aktualisiert werden, wenn sich das Thema ändert. Fügen Sie eine Schaltfläche hinzu, um das Thema umzuschalten.

Erweiterung der Anwendung

Fügen Sie eine neue Komponente (z. B. ein farbiges Quadrat) hinzu, um die Skalierbarkeit des Systems zu demonstrieren. Importieren Sie diese Komponente in App.tsx .

Bonus: Integration in React Scoped CSS

Integrieren Sie für eine verbesserte CSS-Organisation react-scoped-css . Befolgen Sie die Installationsanweisungen für Craco und craco-plugin-scoped-css . Benennen Sie Ihre CSS -Dateien (z. B. app.css in app.scoped.css ) um und aktualisieren Sie die Importe entsprechend. Entscheidend, lassen Sie index.css ungeschickt, um die globale Anwendung von CSS -Variablen sicherzustellen.

Dieser Ansatz bietet eine einfache, effektive und wartbare Lösung für die Implementierung des Dunklen Modus und mehrere Themen in React -Anwendungen. Das Github -Repository und die Live -Demo bieten weitere Ressourcen.