如何为你的 React App 添加双主题？

在设计 React 应用程序时，添加主题功能可以提供更好的用户体验。用户可以根据自己的喜好选择不同的主题来定制 UI。本文将介绍如何为你的 React App 添加双主题。

第一步：创建一个配置文件

首先，创建一个名为 config.js 的文件。该文件将保存应用程序的主题配置。我们将在此定义两个主题：Light 和 Dark，每个主题都有不同的颜色和其他样式。

代码示例：

const theme = {
  light: {
    backgroundColor: '#ffffff',
    textColor: '#000000',
    // 其他样式属性
  },
  dark: {
    backgroundColor: '#000000',
    textColor: '#ffffff',
    // 其他样式属性
  },
};

export default theme;

我们导出 theme 对象，以供应用程序使用。

第二步：创建一个主题切换器

接下来，我们需要创建一个主题切换器，用于在用户点击时切换应用程序的主题。我们可以创建一个简单的按钮组件来处理切换逻辑。

代码示例：

import React from 'react';
import PropTypes from 'prop-types';

const ThemeSwitcher = ({ theme, toggleTheme }) => {
  const handleClick = () => {
    if (theme === 'light') {
      toggleTheme('dark');
    } else {
      toggleTheme('light');
    }
  };

  return (
    <button onClick={handleClick}>
      {theme === 'light' ? 'Dark' : 'Light'} Theme
    </button>
  );
};

ThemeSwitcher.propTypes = {
  theme: PropTypes.string.isRequired,
  toggleTheme: PropTypes.func.isRequired,
};

export default ThemeSwitcher;

ThemeSwitcher 组件接收两个属性：

• theme：当前主题的名称，从父组件传递而来
• toggleTheme：用于切换主题的回调函数，从父组件传递而来

在点击按钮时，handleClick 函数将切换当前的主题。如果当前的主题是 Light，则切换为 Dark；否则，切换为 Light。

按钮文本将根据当前的主题进行设置，如果当前是 Light 主题，按钮文本将是 “Dark Theme”，反之亦然。

第三步：应用主题

现在，我们需要将主题应用于应用程序的各个部分。我们将使用 React 的 Context API 来实现。

首先，创建一个名为 ThemeContext.js 的文件：

import React from 'react';
import theme from './config';

const ThemeContext = React.createContext(theme.light);

export default ThemeContext;

我们将 theme 对象作为默认值传递给 createContext 函数。这表示如果未使用提供程序提供主题，则默认使用 Light 主题。

然后，在应用程序最顶层的组件中，我们将创建一个 ThemeProvider 组件，并在该组件中实现 ThemeContext.Provider。ThemeContext.Provider 是一个可以传递任何值的组件，当我们需要在其子组件中使用时，只需在子组件中使用 ThemeContext.Consumer 包装即可。

我们在组件 App.js 中使用 ThemeProvider 和 ThemeSwitcher：

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import theme from './config';
import ThemeSwitcher from './ThemeSwitcher';

const App = () => {
  const [currentTheme, setCurrentTheme] = useState('light');
  const toggleTheme = (themeName) => setCurrentTheme(themeName);

  return (
    <ThemeContext.Provider value={theme[currentTheme]}>
      <div
        className="App"
        style={{ backgroundColor: theme[currentTheme].backgroundColor }}
      >
        <h1 style={{ color: theme[currentTheme].textColor }}>
          Hello, World!
        </h1>
        <ThemeSwitcher theme={currentTheme} toggleTheme={toggleTheme} />
      </div>
    </ThemeContext.Provider>
  );
};

export default App;

我们从 ThemeContext 中使用当前主题，将其值传递给组件内部的样式。

ThemeSwitcher 组件也从父组件接收两个属性：theme 和 toggleTheme。当用户点击按钮时，toggleTheme 回调函数将更新当前的主题。

总结

在这篇文章中，我们介绍了如何为 React 应用添加双主题功能。我们创建了一个 config 对象，其中包含 Light 和 Dark 主题的样式属性，用该对象设置了默认主题，并创建了一个 ThemeSwitcher 组件，用于切换主题。最后，我们使用 Context API 和 ThemeProvider，将主题应用于组件。

参考文献：

• How to add multiple themes to your React app