在 React/Nextjs 中添加深色和浅色主题支持-css教程-PHP中文网

在 React/Nextjs 中添加深色和浅色主题支持

WBOY

发布： 2024-09-03 18:41:41

转载

415人浏览过

在 react/nextjs 中添加深色和浅色主题支持

在 react/next.js 中添加深色和浅色主题支持

概述

在本指南中，我们将引导您完成向 react 或 next.js 应用程序添加深色和浅色主题支持的步骤。这种方法将允许用户在主题之间切换，并且 ui 将相应更新。

先决条件

react 或 next.js 的基础知识。
已设置 react 或 next.js 项目。

实施深色和浅色主题的步骤

1.创建主题切换组件

接下来，创建一个允许用户在主题之间切换的组件。该组件将包括一个用于切换主题状态的按钮和一个允许用户选择他们喜欢的主题的菜单。

MDWechat微信主题模块

MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和状态栏颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float

查看详情

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/Nextjs 中添加深色和浅色主题支持的详细内容，更多请关注php中文网其它相关文章！