Material UI暗黑模式自定义主色调设置无效求助

核心问题 #

你混淆了主题背景色和primary强调色的设置，同时手动覆盖primary.light和primary.dark的行为破坏了Material UI暗黑主题的自动配色逻辑：

• 错误将背景色设为primary.main：你想要的#262626是主题的深色背景，而非按钮、链接等强调元素的颜色。Material UI dark模式下，默认背景色由palette.background.default控制，而非primary.main。
• 手动设置primary的light/dark值不合理：Material UI会根据primary.main自动生成适配的浅变体（light）和深变体（dark），你设置的#FFFFFF和#000000与#262626对比度失调，导致组件显示不符合预期。

修正后的代码 #

const theme = createTheme({
  palette: {
    mode: 'dark',
    // 设置主题背景色为你需要的#262626
    background: {
      default: "#262626",
      paper: "#323232" // 可选：卡片、弹窗等容器的背景色，对应你原本设置的secondary.main
    },
    primary: {
      main: "#你的强调色值", // 比如适合深色背景的高亮色，如#1976d2
      // 无需手动设置light和dark，Material UI会自动生成适配变体
    },
  }
});

补充说明 #

• 若确实需要自定义primary的light/dark值，建议使用Material UI提供的lighten/darken工具函数生成，确保颜色变体的合理性与对比度。
• 确认主题已正确应用：组件树需被ThemeProvider包裹，且组件使用Material UI内置样式（如Box、Button），避免硬编码样式覆盖主题设置。

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