Use the default theme when creating a theme with extendTheme

[thorn0]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The parent theme is passed to createTheme, so that its values can be arbitrarily used in the new theme. This doesn't seem to be possible with the new extendTheme API.

Examples 🌈

const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        extra: { main: '#d14836', contrastText: '#fff' },
      },
    },
    dark: {
      palette: {
        extra: defaultTheme.colorSchemes.dark.palette.primary, // how do I do this?
      },
    },
  },
});

Motivation 🔦

No response

[ZeeshanTamboli]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://mui.com/r/issue-template) or a link to a repository on GitHub.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[thorn0]

Yes, sorry, I wasn't clear. The theme prop can be a function in ThemeProvider but not in CssVarsProvider. So how do I migrate code like this to CssVarsProvider and extendTheme?

<ThemeProvider theme={outerTheme => createTheme({ ...outerTheme, typography: { fontSize: 12 } })}>
...
</ThemeProvider>

[ZeeshanTamboli]

I believe you can do the following:

import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
import { experimental_extendTheme as extendTheme } from '@mui/material/styles';

const defaultTheme = extendTheme();

const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        extra: { main: '#d14836', contrastText: '#fff' },
      },
    },
    dark: {
      palette: {
        extra: defaultTheme.colorSchemes.dark.palette.primary,
      },
    },
  },
});

export default function App() {
  <CssVarsProvider theme={theme}>...</CssVarsProvider>;
}

Does this work for you?

---

Yes, sorry, I wasn't clear. The theme prop can be a function in ThemeProvider but not in CssVarsProvider. So how do I migrate code like this to CssVarsProvider and extendTheme?

<ThemeProvider theme={outerTheme => createTheme({ ...outerTheme, typography: { fontSize: 12 } })}>
...
</ThemeProvider>

Do you have two ThemeProvider's? One being the outer one? Like:

 <ThemeProvider theme={theme}>
    <div> // your components
     .....
      <ThemeProvider
        theme={(outerTheme) => createTheme({ ...outerTheme, typography: { fontSize: 12 } })}
      ></ThemeProvider>
    </div>
  </ThemeProvider>;

[thorn0]

Do you have two ThemeProvider's?

Yes, like described here in the docs: https://mui.com/material-ui/customization/theming/#nesting-the-theme

[ZeeshanTamboli]

I think @siriwatknp is working on it in #35277. You can also see the discussion here: #30485 (comment)

[siriwatknp]

@thorn0 Since you are using extendTheme, I assume that you are using CSS variables.

Referring to https://mui.com/material-ui/experimental-api/css-theme-variables/customization/#adding-new-theme-tokens, you can do this:

const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        extra: { main: '#d14836', contrastText: '#fff' },
      },
    },
    dark: {
      palette: {
        // when mode changes to `dark`, the value of `var(--mui-palette-primary-main)` will be `theme.colorSchemes.dark.palette.primary`.
        extra: 'var(--mui-palette-primary-main)',
      },
    },
  },
});

Note that if you have custom cssVarPrefix, you should replace mui with that value, e.g.:

const theme = extendTheme({
  cssVarPrefix: 'custom',
  colorSchemes: {
    light: {
      palette: {
        extra: { main: '#d14836', contrastText: '#fff' },
      },
    },
    dark: {
      palette: {
        // when mode changes to `dark`, the value of `var(--mui-palette-primary-main)` will be `theme.colorSchemes.dark.palette.primary`.
        extra: 'var(--custom-palette-primary-main)',
      },
    },
  },
});

[thorn0]

@siriwatknp What's the recommended way to migrate the following code?

<ThemeProvider theme={outerTheme => createTheme({ ...outerTheme, typography: { fontSize: 12 } })}>
...
</ThemeProvider>

[siriwatknp]

@siriwatknp What's the recommended way to migrate the following code?

<ThemeProvider theme={outerTheme => createTheme({ ...outerTheme, typography: { fontSize: 12 } })}>
...
</ThemeProvider>

Do you mind sharing the full code via CodeSandbox? That way I can explain which part you have to change.