Menambah Sokongan Tema Gelap dan Terang dalam React/Next.js-tutorial css-php.cn

Menambah Sokongan Tema Gelap dan Terang dalam React/Next.js

王林

Lepaskan： 2024-09-03 18:31:10

asal

603 orang telah melayarinya

Adding Dark and Light Theme Support in React/Next.js

Menambah Sokongan Tema Gelap dan Terang dalam React/Next.js

Gambaran keseluruhan

Dalam panduan ini, kami akan membimbing anda melalui langkah-langkah untuk menambah sokongan tema gelap dan terang pada aplikasi React atau Next.js. Pendekatan ini akan membolehkan pengguna menogol antara tema dan UI akan dikemas kini dengan sewajarnya.

Prasyarat

Pengetahuan asas React atau Next.js.
Projek React atau Next.js disediakan.

Langkah-langkah untuk Melaksanakan Tema Gelap dan Terang

1.Mencipta Komponen Togol Tema

Seterusnya, buat komponen yang membolehkan pengguna bertukar antara tema. Komponen ini akan termasuk butang yang menogol keadaan tema dan menu yang membolehkan pengguna memilih tema pilihan mereka.

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;

Salin selepas log masuk

2. Menentukan Pembolehubah CSS Khusus Tema

Tentukan pembolehubah CSS untuk kedua-dua tema gelap dan terang dalam fail index.css atau App.css anda. Pembolehubah ini akan mengawal penggayaan keseluruhan aplikasi berdasarkan tema aktif.

/* 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;
}

Salin selepas log masuk

Atas ialah kandungan terperinci Menambah Sokongan Tema Gelap dan Terang dalam React/Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!