如何让React项目的DarkModeToggle切换时同步应用暗黑模式状态

你现在的问题是**react-dark-mode-toggle仅提供了开关UI和状态切换，不会自动帮你修改应用的全局样式/主题**，得自己把状态和应用的主题系统关联起来。结合你用的Material-UI，按下面的步骤修改：

1. 配置Material-UI亮色/暗色主题 #

Material-UI自带主题切换支持，先创建亮色、暗色两个主题，再根据isDarkMode状态动态切换。

2. 用ThemeProvider包裹应用 #

把整个App组件放在ThemeProvider中，让所有Material-UI组件能感知当前主题。

3. 可选：同步修改全局body样式 #

如果需要页面背景色也跟随主题变化，可通过useEffect修改body的样式。

修改后的完整代码 #

import React, { useState, useEffect } from "react";
import { Container, AppBar, Typography, Grow, Grid, createTheme, ThemeProvider } from "@material-ui/core";
import { useDispatch } from "react-redux";
import DarkModeToggle from "react-dark-mode-toggle";

import Posts from "./components/Posts/Posts";
import Form from "./components/Form/Form";
import wisp_logo from "./images/wisp_logo.png";
import useStyles from "./styles";

const App = () => {
  const [currentId, setCurrentId] = useState();
  const classes = useStyles();
  const dispatch = useDispatch();
  const [isDarkMode, setIsDarkMode] = useState(() => false);

  // 创建亮色主题
  const lightTheme = createTheme({
    palette: {
      mode: 'light',
      primary: {
        main: '#1976d2', // 可自定义你的主色
      },
    },
  });

  // 创建暗色主题
  const darkTheme = createTheme({
    palette: {
      mode: 'dark',
      primary: {
        main: '#90caf9',
      },
    },
  });

  // 切换主题时同步修改body背景色（可选，按需调整）
  useEffect(() => {
    document.body.style.backgroundColor = isDarkMode ? '#121212' : '#ffffff';
  }, [isDarkMode]);

  return (
    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
      <Container maxWidth="lg"> {/* 修正原代码的拼写错误：maxwidth → maxWidth */}
        <AppBar className={classes.appBar} position="static" color="inherit">
          <DarkModeToggle
            onChange={setIsDarkMode}
            checked={isDarkMode}
            size={80}
          />
        </AppBar>
        {/* 其他组件会自动继承当前主题样式 */}
        <Grow in>
          <Grid container justify="space-between" alignItems="stretch" spacing={3}>
            <Grid item xs={12} sm={7}>
              <Posts setCurrentId={setCurrentId} />
            </Grid>
            <Grid item xs={12} sm={4}>
              <Form currentId={currentId} setCurrentId={setCurrentId} />
            </Grid>
          </Grid>
        </Grow>
      </Container>
    </ThemeProvider>
  );
};

export default App;

关键说明 #

• Material-UI的palette.mode设为dark时，会自动让内置组件切换到暗黑样式（比如文字变浅、背景加深）。
• 如果你用了自定义useStyles，可以在样式中通过theme变量适配不同模式，示例：

  // styles.js 中的示例
  const useStyles = makeStyles((theme) => ({
    appBar: {
      backgroundColor: theme.palette.background.paper,
    },
  }));
  

• 若不需要Material-UI主题，也可以给根元素添加dark-mode类名，在CSS中编写对应样式，再用useEffect切换类名实现全局样式变化。

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