技术指南：使用 CSS Variables 在 React 中实现黑暗模式 (第 1 部分)

前言

近年来，暗黑模式已成为各种平台和设备的普遍功能。随着浏览器对相关 API 的广泛支持，现在使用 CSS Variables 可以在 React 应用程序中轻松实现暗黑模式和白天模式之间的切换。本文将逐步指导您使用 CSS Variables 在 React 中实现暗黑模式。

第 1 部分：项目设置和核心逻辑

项目设置

1. 创建一个新的 React 项目。
2. 在 src 目录下创建 styles.css 文件。
3. 在 App.js 中导入 styles.css 文件。

核心逻辑

1. 在 App.js 中，创建两个状态变量：isDark（布尔值）和 theme（对象）。isDark 用于跟踪当前模式，而 theme 用于存储两种模式的样式。
2. 编写一个函数来切换主题：

const toggleTheme = () => {
  setIsDark(!isDark);
};

3. 在 styles.css 中，创建两个根变量：--primary-color 和 --background-color。这将存储两种模式的主题颜色。
4. 使用这些变量设置根元素的样式：

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

第 2 部分：UI 组件

App.js

function App() {
  const [isDark, setIsDark] = useState(false);

  const toggleTheme = () => {
    setIsDark(!isDark);
  };

  return (
    <div className={isDark ? "dark" : "light"}>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
}

styles.css

.dark {
  --primary-color: #fff;
  --background-color: #000;
}

.light {
  --primary-color: #000;
  --background-color: #fff;
}

实现其他组件

import styled from "styled-components";

const StyledComponent = styled.div`
  color: var(--primary-color);
  background-color: var(--background-color);
`;

结论

本文介绍了如何在 React 中使用 CSS Variables 实现暗黑模式的基本步骤。通过设置状态变量、使用根变量并将其应用于 UI 组件，您可以轻松切换应用程序的外观。在后续部分中，我们将深入探讨高级主题，如动态切换主题以及处理用户偏好。