CreateTheme: MUI 6: how to combine colorSchemes with theme.palette.augmentColor(...)

[wouter-leistra]

We are updating our MUI material UI theme to follow version 6 recommendations and stumbled upon the documentation that colorSchemes is the preferred way going forward. I adjusted my theme with light and dark themes palettes but we have some custom colors we like to augment. The documentation on augmentColors specifies to use the initial theme to create an updated theme with createTheme(theme, {...}) where you specify the custom colors. But I don't get it to work with dark and light theme palettes for these custom colors as specifying just palette on the second theme creation overrides the initial theme as stated in the documentation and spreading theme.colorSchemes.light.palette gives TypeScript errors that Theme doesn't have this property.

Can someone help me to find a way to get custom augmented colors to work with colorSchemes for light and dark?

Search keywords:

[siriwatknp]

Sure, can you provide a Code Sandbox/Stackblitz that replicate your setup and the type errors?

[wouter-leistra]

I figured it out already, my initial theme has all the color schemes and
everything. But all problems go away if your first create some factory
theme with same tonalOffset and contrastThreshold as the actual desired
theme like

const baseTheme = createTheme({ tonalOffset: 0.2, contrastThreshold: 4.5 });

And after that line specify your own theme using the baseTheme for
augmentColor

const myTheme = createTheme({ 
  colorSchemes: {
    light: {
      palette: {
        myCustomColor: baseTheme.palette.augmentColor (...)
      }
    }
  });

I had the order the wrong way around and didn't catch that.

[siriwatknp]

@wouter-leistra Thanks for letting me know. If you find other issue related to v6 migration, feel free to open a new one.
Have a great day!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@wouter-leistra How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.