拥抱黑暗：使用 React Vant 实现黑暗模式

前端

2023-10-14 05:52:57

在 React Vant 中开启优雅的夜间体验：探索黑暗模式

在数字化时代，我们的眼睛无时无刻不在遭受屏幕强光的侵袭。为了缓解眼部疲劳，黑暗模式应运而生。它巧妙地将明快的背景色和深色文本调换成深色背景和浅色文本，为我们的眼睛提供亟需的休憩。

React Vant 黑暗模式

React Vant 是一款颇受欢迎且功能强大的 UI 库，专为 React 应用程序打造，提供了一系列组件和主题系统。借助 React Vant，为应用程序添加黑暗模式支持变得轻而易举。

CSS 变量

利用 CSS 变量是实现黑暗模式的简单方法之一。CSS 变量允许你在整个样式表中定义和使用变量，从而轻松改变应用程序的主题。

在 React Vant 中使用 CSS 变量，首先定义一个 CSS 变量，例如：

:root {
  --primary-color: #000;
  --secondary-color: #fff;
}

接着，使用这些变量设置组件样式：

.my-component {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

ThemeProvider

ThemeProvider 组件允许你在 React 应用程序中管理主题。你可以利用 ThemeProvider 创建和应用黑暗模式主题。

首先，创建一个黑暗模式主题：

const darkTheme = {
  "--primary-color": "#000",
  "--secondary-color": "#fff",
};

接下来，使用 ThemeProvider 组件应用黑暗模式主题：

import { ThemeProvider } from 'react-vant';

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <MyComponent />
    </ThemeProvider>
  );
}

避免 ConfigProvider

虽然 ConfigProvider 组件也可以在 React Vant 中管理主题，但建议在实现黑暗模式时避免使用它。这是因为 ConfigProvider 会影响应用程序的所有组件，这可能导致意外的样式变更。

示例代码

为了更深入地理解如何在 React Vant 中实现黑暗模式，我们提供了一段示例代码：

import { ThemeProvider, Switch } from 'react-vant';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  const darkTheme = {
    "--primary-color": "#000",
    "--secondary-color": "#fff",
  };

  return (
    <div>
      <ThemeProvider theme={darkMode ? darkTheme : null}>
        <h1>黑暗模式</h1>
        <Switch checked={darkMode} onChange={toggleDarkMode} />
      </ThemeProvider>
    </div>
  );
}