Can not import createPalette in v7

[trabati]

Steps to reproduce

import createPalette from "@mui/material/styles/createPalette";

Current behavior

createPalette can not be imported anymore:

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.4.1
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 137.0.7151.120
    Edge: Not Found
    Safari: 18.4
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.1.2 
    @mui/icons-material: ^7.1.1 => 7.1.2 
    @mui/material: ^7.1.1 => 7.1.2 
    @mui/private-theming:  7.1.1 
    @mui/styled-engine:  7.1.1 
    @mui/system: ^7.1.1 => 7.1.1 
    @mui/types:  7.4.3 
    @mui/utils:  7.1.1 
    @mui/x-data-grid: ^7.22.2 => 7.29.2 
    @mui/x-date-pickers: 8.5.2 => 8.5.2 
    @mui/x-internals:  7.29.0 
    @mui/x-tree-view: ^8.5.2 => 8.5.3 
    @types/react: ^19.1.0 => 19.1.3 
    react: ^19.1.0 => 19.1.0 
    react-dom: ^19.1.0 => 19.1.0 
    typescript: ^5.8.3 => 5.8.3 

Search keywords: createPalette

[brijeshb42]

This is considered a private import and is not exposed through esm exports. You can pass custom palette options to the createTheme imported from @mui/material/styles if you are trying to create a custom palette.

[trabati]

Would it make sense to expose palette creation directly, so that we can build a palette without needing to create the full theme?

Right now, the workaround I’m using is to call createTheme multiple times—just to extract the palette. My goal is to override a few colors and then reuse the resulting palette in my custom theme.

Example:

// First, create a partial theme just to get the palette
export const palette = createTheme({
  palette: {
    primary: {
      main: '#4493F8',
    },
  },
}).palette;

// Then reuse the palette in the actual theme
export const standardTheme = createTheme({
  palette,
  components: {
    MuiTypography: {
      styleOverrides: {
        h1: { color: palette.primary.main },
      },
    },
    // ...
  },
});

It would be much cleaner if we could construct just the palette object directly—maybe with a createPalette() utility?

[brijeshb42]

Couldn't you just provide the custom palette options when creating standardTheme? It's the same thing.

[trabati]

You mean like this:

// Directly define palette and use theme functions to access values
export const standardTheme = createTheme({
  palette: {
    primary: {
      main: '#4493F8',
    },
  },
  components: {
    MuiTypography: {
      styleOverrides: {
        h1: (theme) => ({
          color: theme.palette.primary.main,
        }),
      },
    },
    // ...
  },
});

Yes, this works — but it feels more cumbersome and adds boilerplate. Wouldn’t a createPalette() utility make this cleaner and more direct? See my example before?

[brijeshb42]

You could take your custom palette config outside and just pass it. Codewise, it'd be equivalent to calling createPalette() and then passing that to your theme -

const palette = {
  primary: {
    main: '#4493F8',
  },
};

export const standardTheme = createTheme({
  palette,
  components: {
    MuiTypography: {
      styleOverrides: {
        h1: (theme) => ({
          color: theme.palette.primary.main,
        }),
      },
    },
    // ...
  },
});

Closing this as exposing createPalette doesn't provide any extra functionality.

[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.