React点击切换主题时通过data-theme修改body背景的方法

完全可以直接操作body标签设置data-theme属性，不需要引入额外依赖，借助React的useEffect监听主题状态变化同步属性即可，具体实现如下：

• 引入useEffect钩子，新增副作用逻辑：每次主题状态更新时，直接通过原生DOM API给document.body设置对应data-theme属性
  修改后的App组件核心代码：

import "./styles.css";
import useLocalStorage from "use-local-storage";
import { useEffect } from "react";

export default function App() {
  // 检测系统默认深色模式偏好
  const defaultDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  // 持久化存储主题配置
  const [theme, setTheme] = useLocalStorage(
    "theme",
    defaultDark ? "dark" : "light"
  );

  // 监听主题变化，同步属性到body标签
  useEffect(() => {
    document.body.dataset.theme = theme;
  }, [theme]);

  // 切换主题逻辑
  const clickHandler = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={clickHandler}>Dark Mode</button>
    </div>
  );
}

• 原有CSS代码无需修改
  因为body标签自身已经携带data-theme属性，可以直接匹配[data-theme="dark"]/[data-theme="light"]选择器读取到定义的CSS变量，背景色会跟随主题正常切换。同时属性挂载在body上后，所有页面子元素都可以继承到对应CSS变量，原本设置在.App元素上的data-theme属性可以直接移除，避免重复逻辑。

可选优化：如果需要避免首屏加载时的主题闪烁，可以在项目入口HTML文件中添加一段内联脚本，在React应用挂载前提前读取本地存储的主题值，预先给body设置好对应data-theme属性。

内容的提问来源于stack exchange，提问作者Steen Toons