扩展 Material UI 现有的深色模式颜色

Material UI 的默认主题提供了一个调色板，包括一组特殊的颜色暗色 (docs https://next.material-ui.com/customization/palette/#dark-mode, code https://github.com/mui-org/material-ui/blob/v5.0.0-beta.4/packages/material-ui/src/styles/createPalette.js).

这些深色模式颜色的特殊之处在于使用它们的组件不需要依赖于了解主题的颜色palette.mode（又名明/暗模式）-它们会自动更新。代码沙盒演示 https://codesandbox.io/s/toggle-dark-light-kt6vf

我的目标是extend这组颜色，以便我编写的组件可以使用new超出此内置设置的颜色，例如theme.palette.myColor并从相同的自动行为中受益。

换句话说，我不想在每个主题消耗组件中重复暗模式逻辑：

const WhatIDontWantComponent = () => (
  <Box
    sx={{
      color: (theme) =>
        theme.palette.mode === "light"
          ? theme.palette.myColor.light
          : theme.palette.myColor.dark,
    }}
  />
);

我想用

const WhatIWantComponent = () => (
  <Box
    sx={{
      color: (theme) => theme.palette.myColor
    }}
  />
);

So myColor将包含在已经存在的明/暗集中，并从这种自动行为中受益。

可能的？有没有什么方法可以在我的应用程序中完成此操作，而无需以某种方式修补 MUI 以接受自定义颜色？

deps

• @material-ui/core 版本 5.0.0-beta.4
• 反应，反应-dom 17.0.2
• 下一个.js 11.0

最终还是这样：

const baseTheme = createTheme({...common options...})
export const lightTheme = createTheme({ ...light specific...}, baseTheme)
export const darkTheme = createTheme({ mode: "dark", ...dark specific...}, baseTheme)

基于this https://github.com/mui-org/material-ui/issues/21757#issuecomment-657226028讨论。 我们基本上通过多个步骤来执行主题组合+利用第二个参数createTheme()得到深度合并。

拥有两个主题后，您可以考虑通过自带主题来设置切换mode:

<ThemeProvider theme={mode ? lightTheme : darkTheme}>
  {...app...}
</ThemeProvider>

这是可行的，但在我看来，这种方法的一个缺点是我有两个主题，并且必须在外部管理暗/亮状态。这不是一个大问题，但感觉有点多余——在我看来，暗/亮模式似乎是一个可以（应该）在单个主题内部处理的问题。

也许有充分的理由反对，但在我看来，如果 MUI 允许用户指定我们自己的深色调色板（就像我在原来的问题中问的那样），与当前的调色板相比，感觉更符合人体工程学硬编码的 https://github.com/mui-org/material-ui/blob/v5.0.0-beta.4/packages/material-ui/src/styles/createPalette.js#L52.

因此，如果您正在寻找自定义 MUI 深色，鉴于目前的情况，这种方法似乎是最好的方法。