在 React/Next.js 中添加暗黑和明亮主题支持
原文英文，约400词，阅读约需2分钟。
📝
内容提要
本文介绍了如何在React或Next.js应用中添加暗黑和明亮主题支持。通过创建一个主题切换组件和定义主题特定的CSS变量，用户可以在不同主题之间切换，并相应地更新UI。
🔎
延伸解读
主题切换组件的交互设计
文章中的 ThemeToggle 组件通过一个按钮控制菜单的展开与收起，菜单内提供暗黑和明亮两个选项。按钮图标根据当前主题显示月亮或太阳，菜单项也会高亮当前激活的主题。这种设计让用户能直观地切换主题，同时组件结构清晰，便于集成到现有项目中。
CSS 变量驱动的主题样式
文章使用 CSS 变量来定义不同主题下的颜色值。在 :root 中设置默认变量，然后通过 body.dark-mode 和 body.light-mode 分别覆盖这些变量。这样，当主题切换时，所有引用这些变量的样式会自动更新，无需修改每个组件的样式，实现了样式的集中管理和动态切换。
实现主题切换的关键步骤
要实现主题切换，首先需要创建 ThemeToggle 组件，并管理当前主题状态。然后，在全局 CSS 文件中定义暗黑和明亮主题的变量。最后，根据当前主题为 body 元素添加相应的类名（如 dark-mode 或 light-mode），从而触发 CSS 变量的更新。文章提供的代码示例展示了这一流程。
❓
Q&A
如何在React或Next.js中添加主题切换功能？
可以通过创建一个主题切换组件，包含按钮和菜单供用户选择主题来实现。
主题切换组件需要包含哪些元素？
主题切换组件需要包含一个按钮和一个菜单，用户可以通过它们选择暗黑或明亮主题。
如何定义暗黑和明亮主题的CSS变量？
在index.css或App.css文件中定义主题特定的CSS变量，以控制应用的整体样式。
实现主题切换功能需要哪些前置知识？
需要基本的React或Next.js知识，并且要有一个已设置的项目。
如何在主题切换中更新UI？
用户切换主题后，UI会根据当前选择的主题自动更新。
暗黑模式和明亮模式的CSS变量有什么不同？
暗黑模式和明亮模式的CSS变量在颜色和背景设置上有所不同，以适应各自的视觉风格。
🏷️
