使用Material UI主题时，如何为暗黑模式设置不同背景？

你尝试为Material UI主题配置暗黑模式背景色，但修改后的配置未生效，背景仍保持浅色模式的颜色。以下是问题分析和解决方法：

问题原因 #

你的ThemeOptions配置结构错误，Material UI并不识别palette.dark.background这种嵌套方式。官方主题配置中，暗黑模式的颜色需要通过动态根据mode切换配置，或者使用palette.light和palette.dark字段分别定义两种模式的完整调色板。

解决方法 #

方法一：切换模式时动态替换背景色配置 #

修改ColorProvider中的useEffect逻辑，根据当前颜色模式（light/dark）动态设置对应的背景色：

// 定义两种模式的背景色配置
const modeBackgrounds = {
  light: {
    default: '#6AD6CD',
    paper: '#086A5D',
  },
  dark: {
    default: '#074E40',
    paper: '#424242',
  },
};

export const ColorProvider: React.FC = ({ children }) => {
    const [colorMode, setColorMode] = useState<ColorMode>(() => {
        const savedColorMode = getCookie('colorMode');
        return savedColorMode ? (savedColorMode as ColorMode) : 'light';
    });

    const [theme, setTheme] = useState(createTheme({
      ...myThemeOptions,
      palette: {
        ...myThemeOptions.palette,
        background: modeBackgrounds.light,
      },
    }));

    useEffect(() => {
        const updatedPaletteMode = colorMode === 'dark' ? 'dark' : 'light';
        const updatedThemeOptions = {
            ...myThemeOptions,
            palette: {
                ...myThemeOptions.palette,
                mode: updatedPaletteMode,
                background: modeBackgrounds[colorMode], // 根据当前模式选择背景色
            },
        };
        const updatedTheme = createTheme(updatedThemeOptions);
        setTheme(updatedTheme);
        setCookie('colorMode', colorMode);
    }, [colorMode]);

    const toggleColorMode = () =>
        setColorMode(colorMode === 'light' ? 'dark' : 'light');

    const contextValue: ColorContextType = {
        colorMode,
        toggleColorMode,
    };

    return (
        <ColorContext.Provider value={contextValue}>
            <ThemeProvider theme={theme}>
                <CssBaseline enableColorScheme/>
                {children}
            </ThemeProvider>
        </ColorContext.Provider>
    );
};

方法二：使用官方推荐的双模式配置结构 #

直接在myThemeOptions中定义light和dark模式的完整调色板，createTheme会根据mode自动加载对应配置：

export const myThemeOptions: ThemeOptions = {
    palette: {
        mode: "light" as PaletteMode,
        primary: {
            main: '#1FC8B9',
            dark: '#14A996',
        },
        secondary: {
            main: '#57ECE6',
            dark: '#0F6E60',
        },
        // 浅色模式专属配置
        light: {
            background: {
                default: '#6AD6CD',
                paper: '#086A5D',
            },
        },
        // 深色模式专属配置
        dark: {
            background: {
                default: '#074E40',
                paper: '#424242',
            },
        },
    },
};

此时ColorProvider中的useEffect无需额外修改，仅切换mode即可，createTheme会自动读取对应模式的配置：

useEffect(() => {
    const updatedPaletteMode = colorMode === 'dark' ? 'dark' : 'light';
    const updatedThemeOptions = {
        ...myThemeOptions,
        palette: {
            ...myThemeOptions.palette,
            mode: updatedPaletteMode,
        },
    };
    const updatedTheme = createTheme(updatedThemeOptions);
    setTheme(updatedTheme);
    setCookie('colorMode', colorMode);
}, [colorMode]);

注意事项 #

• 确保CssBaseline的enableColorScheme属性已设置，它会帮助Material UI正确应用主题的颜色方案。
• 两种方法都能实现需求，方法二更符合Material UI的官方配置规范，推荐使用。

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