React/Next.js にダークおよびライトテーマのサポートを追加-CSSチュートリアル-php.cn

React/Next.js にダークおよびライトテーマのサポートを追加

王林

リリース： 2024-09-03 18:31:10

オリジナル

551 人が閲覧しました

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

React/Next.js にダークおよびライトテーマのサポートを追加

概要

このガイドでは、ダークテーマとライトテーマのサポートを React または Next.js アプリケーションに追加する手順を説明します。このアプローチにより、ユーザーはテーマを切り替えることができ、それに応じて UI が更新されます。

前提条件

React または Next.js の基礎知識
React または Next.js プロジェクトのセットアップ。

ダークテーマとライトテーマを実装する手順

1.テーマ切り替えコンポーネントの作成

次に、ユーザーがテーマを切り替えることができるコンポーネントを作成します。このコンポーネントには、テーマの状態を切り替えるボタンと、ユーザーが好みのテーマを選択できるメニューが含まれます。

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. テーマ固有の CSS 変数の定義

index.css または App.css ファイルで、暗いテーマと明るいテーマの両方の CSS 変数を定義します。これらの変数は、アクティブなテーマに基づいてアプリケーション全体のスタイルを制御します。

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

ログイン後にコピー

以上がReact/Next.js にダークおよびライトテーマのサポートを追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。