如何避免Material UI深色模式下AppBar颜色饱和度降低？

问题现象 #

当Material UI主题设置mode: "dark"时，AppBar的主色会出现饱和度降低、颜色发灰的情况，切换为light模式后恢复正常。仅AppBar存在该问题，其他组件无此现象。

相关配置与代码：

• 主题配置：

const theme = createTheme({
    palette: {
        mode: "dark",
        primary: {
            main: "#1c7eea"
        }
    }
});

• AppBar组件代码：

<AppBar position="sticky" enableColorOnDark>

视觉对比：浅色模式下AppBar显示为设定的#1c7eea纯主色，深色模式下颜色饱和度明显下降，呈现偏灰的色调。

原因分析 #

这是Material UI遵循Material Design深色主题规范的默认行为：在深色模式下，为避免高饱和色过于刺眼，部分组件会自动对主色进行透明度叠加或色彩变体替换。

具体到AppBar，当启用enableColorOnDark属性时，组件会默认使用palette.primary.dark（由主题自动根据primary.main生成的低饱和深色变体），而非直接使用primary.main的原始色值，导致视觉上饱和度降低。

解决办法 #

方法1：强制指定组件背景色（快速生效） #

直接通过sx属性手动设置背景色，绕过组件的自动色彩调整逻辑：

<AppBar position="sticky" sx={{ background: "#1c7eea" }} enableColorOnDark>

方法2：自定义主题色彩变体（全局统一） #

在主题配置中明确指定深色模式下的primary.dark色值，覆盖默认生成的低饱和变体：

const theme = createTheme({
    palette: {
        mode: "dark",
        primary: {
            main: "#1c7eea",
            dark: "#1c7eea" // 让深色变体与主色保持一致
        }
    }
});

方法3：禁用自动色彩适配（备选） #

移除enableColorOnDark属性，AppBar会在深色模式下使用默认的深色背景，但此方法不会使用主色，仅适合不需要主色背景的场景。

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