Material-UI暗黑模式仅导航栏生效，如何实现全局状态同步？

你当前的核心问题是：DarkMode组件内的ThemeProvider仅包裹了自身内容，Navbar、Hero、Footer等核心页面组件都在这个Provider的作用范围之外，所以切换主题时只有DarkMode内部元素（以及Navbar可能碰巧继承的部分样式）会生效，其余组件完全不受主题控制。

下面是具体的解决步骤：

步骤1：将主题状态提升到顶层组件 #

把暗黑模式的状态管理移到根渲染组件（Main.jsx）中，让所有子组件共享状态。同时用ThemeProvider包裹所有需要主题的组件，确保全局都能感知主题变化。

修改后的Main.jsx代码：

import React, { useState } from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Navbar from './Components/components/Navbar';
import Hero from './Components/components/Hero';
import About from './Components/components/About';
import Feature from './Components/components/Feature';
import Card from './Components/components/Card';
import Opensource from './Components/components/Opensource';
import Footer from './Components/components/Footer';
import Workshop from './Components/components/Workshop';
import DarkMode from './Components/components/DarkMode';

const root = ReactDOM.createRoot(document.getElementById('root'));

function App() {
  // 顶层统一管理暗黑模式状态
  const [isDarkMode, setIsDarkMode] = useState(true);

  // 主题切换逻辑
  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
  };

  // 根据当前状态生成主题
  const theme = createTheme({
    palette: {
      mode: isDarkMode ? 'dark' : 'light',
      primary: {
        main: '#90caf9',
      },
      secondary: {
        main: '#131052',
      },
    },
  });

  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <CssBaseline /> {/* 重置全局样式，确保主题色能覆盖默认样式 */}
        <Navbar />
        <DarkMode isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
        <Hero />
        <Card />
        <About />
        <Feature />
        <Workshop />
        <Opensource />
        <Footer />
      </ThemeProvider>
    </React.StrictMode>
  );
}

root.render(<App />);

步骤2：简化DarkMode组件 #

现在DarkMode只需要负责展示切换按钮，状态和切换逻辑由顶层组件通过props传入，无需自己管理状态和ThemeProvider。

修改后的DarkMode.jsx代码：

import React from 'react';
import { Switch } from "@mui/material"

export default function DarkMode({ isDarkMode, toggleDarkMode }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h2>Toggle Dark mode</h2>
      <Switch checked={isDarkMode} onChange={toggleDarkMode} />
    </div>
  )
}

步骤3：确保自定义组件适配主题 #

如果你的自定义组件（比如Hero、About）用了硬编码的颜色，切换主题时不会自动变化。要让它们跟随主题，推荐两种方式：

• 优先使用Material-UI提供的组件（如Typography、Box、Paper等），这些组件会自动继承主题样式。
• 用useTheme钩子获取主题变量，在自定义样式中引用：

  import { useTheme } from '@mui/material/styles';
  
  function Hero() {
    const theme = useTheme();
    return (
      <div style={{ 
        backgroundColor: theme.palette.background.default, 
        color: theme.palette.text.primary 
      }}>
        {/* 组件内容 */}
      </div>
    );
  }
  

完成以上修改后，切换开关时所有被ThemeProvider包裹的组件都会同步切换暗黑/亮色模式，实现全局主题更新。

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