Unterstützung für dunkle und helle Themes in React/Next.js hinzufügen

Unterstützung für dunkle und helle Themes in React/Next.js hinzufügen

Überblick

In dieser Anleitung führen wir Sie durch die Schritte zum Hinzufügen von Unterstützung für dunkle und helle Designs zu einer React- oder Next.js-Anwendung. Dieser Ansatz ermöglicht es Benutzern, zwischen Themen zu wechseln, und die Benutzeroberfläche wird entsprechend aktualisiert.

Voraussetzungen

• Grundkenntnisse von React oder Next.js.
• Ein React- oder Next.js-Projekt eingerichtet.

Schritte zum Implementieren dunkler und heller Themen

1.Erstellen einer Theme-Toggle-Komponente

Als nächstes erstellen Sie eine Komponente, die es Benutzern ermöglicht, zwischen Themen zu wechseln. Diese Komponente enthält eine Schaltfläche, die den Themenstatus umschaltet, und ein Menü, mit dem Benutzer ihr bevorzugtes Thema auswählen können.

import React, { useState } from 'react';
import { FaMoon, FaSun } from 'react-icons/fa';

function ThemeToggle({ theme, handleThemeChange }) {
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  return (
    <li className="m-auto mx-3" role="button">
      <div className="theme-toggle">
        <button className="theme-toggle-btn" onClick={toggleMenu}>
          {theme === 'dark' ? <FaMoon /> : <FaSun />}
        </button>
        {menuOpen && (
          <div className="theme-menu">
            <p className="theme-title">Toggle Dark Mode</p>
            <ul>
              <li
                onClick={() => handleThemeChange('dark')}
                className={theme === 'dark' ? 'active' : ''}
              >
                <FaMoon /> Dark Mode
              </li>
              <li
                onClick={() => handleThemeChange('light')}
                className={theme === 'light' ? 'active' : ''}
              >
                <FaSun /> Light Mode
              </li>
            </ul>
          </div>
        )}
      </div>
    </li>
  );
}

export default ThemeToggle;

2. Definieren themenspezifischer CSS-Variablen

Definieren Sie CSS-Variablen für dunkle und helle Themen in Ihrer index.css- oder App.css-Datei. Diese Variablen steuern den Stil der gesamten Anwendung basierend auf dem aktiven Theme.

/* Default Theme Variables */
:root {
  --white-color: #ffff;
  --background-color: black;
  --text-color: #ffff;
  --games-text: #452c88;
  --games-text-2: #60882c;
  --game-bg-card: #252331;
  --card-wrapper-color: #252331;
  --custom-input-bg: #14131b;
  --siderbar-bg: #1a1923;
  --profile-badge-color: #252364;
  --card-header-bg: #032b53;
  --theme-color: #df1b47;
  --table-row-bg-color: #1e1d29;
  --table-row-header-color: #252364;
  --button-bg-color: #252364;
  --dark-light-bg-color: #353940;
}

/* Dark Theme */
body.dark-mode {
  --white-color: #ffff;
  --background-color: black;
  --text-color: #ffff;
  --game-bg-card: #252331;
  --card-wrapper-color: #252331;
  --custom-input-bg: #14131b;
  --siderbar-bg: #1a1923;
  --profile-badge-color: #252364;
  --card-header-bg: #032b53;
  --table-row-bg-color: #1e1d29;
  --table-row-header-color: #252364;
  --button-bg-color: #252364;
  --dark-light-bg-color: #353940;
}

/* Light Theme */
body.light-mode {
  --white-color: #ffff;
  --background-color: rgb(253, 251, 251);
  --text-color: #0f0e0ecc;
  --game-bg-card: #eae8eb;
  --custom-input-bg: #e0e0e0;
  --card-wrapper-color: #e1e0e6;
  --custom-input-bg: #e6e6e6;
  --siderbar-bg: #e5e5e5;
  --profile-badge-color: #e64b4b;
  --card-header-bg: #a6cbf0;
  --table-row-bg-color: #ffffff;
  --table-row-header-color: #f2f4f6;
  --button-bg-color: #df1b47;
  --dark-light-bg-color: #c5c1c1;
}

Das obige ist der detaillierte Inhalt vonUnterstützung für dunkle und helle Themes in React/Next.js hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!