[material-ui] Unable to customize palettes of colorSchemes

[Gramdel]

Steps to reproduce

I encountered an issue while migrating from MUI v5.16 to v6. I have the following code for customizing palettes with new colorSchemes approach:

const theme = createTheme({
    colorSchemes: {
        dark: {
            palette: {
                background: {
                    default: '#0A0A0A',
                },
            },
        },
        light: {
            palette: {
                bg: {
                    main: grey[800],
                    dark: grey[700],
                },
            },
        },
    },
});
console.log(theme.colorSchemes);

Current behavior

Color of theme.colorSchemes.dark.palette.background.default is not changed (stays '#121212'). Instead, a new property palette.palette is created.

Custom color bg is not added to the palette either.

Expected behavior

theme.colorSchemes.dark.palette.background.default should be '#0A0A0A'. bg should be added to the palette.

Context

No response

Your environment

I'm using react-scripts v5.0.1.

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 18.9.0 - C:\Program Files\nodejs\node.EXE npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.98) npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.0.0 @mui/icons-material: ^6.0.0 => 6.0.0 @mui/material: ^6.0.0 => 6.0.0 @mui/private-theming: 6.0.0 @mui/styled-engine: 6.0.0 @mui/system: 6.0.0 @mui/types: 7.2.16 @mui/utils: 6.0.0 @types/react: 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: 4.9.5 ``` Tested in Chrome v128 and Yandex Browser v24.

Search keywords: colorSchemes, palette, theme, createTheme

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it. Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[Gramdel]

It doesn't look like this bug report has enough info for one of us to reproduce it. Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

My bad, unintentionally hit "Enter" before finishing the text :)

[siriwatknp]

I am checking…

[siriwatknp]

I is a bug to me. For a workaround, you can add cssVariables: true to the createTheme. With CSS variables, the result looks correct.

createTheme({
  cssVariables: true,
  colorSchemes: …
})

[github-actions[bot]]

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] We value your feedback @Gramdel! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!