Material UI V5: Pass multiple variants on createTheme in primary palette-CodePudding

I have two themes, darkcustomtheme:

export const darkcustomTheme = createTheme({

palette: {
    mode: 'dark',
    primary: {
        main: darkprimaryColor,
        dark: grey[100],
        light: grey[200],
    },
    secondary: {
        main: darksecondaryColor,
    },
    info: {
        main: darkinfoColor,
    }
},

And the lightcustomTheme:

    palette: {
    mode: 'light',
    primary: {
        main: lightprimaryColor,
        dark: orange[100],
        light: orange[200],
    },
    secondary: {
        main: lightsecondaryColor,
    },
    info: {
        main: lightinfoColor,
    },
},

Then I use the ThemeProvider to change the theme based on the state of a switch button:

<ThemeProvider theme={theme ? darkcustomTheme : lightcustomTheme}>

The problem is that I can't pass the variants dark and light on primary palette of the customTheme on a button. I'm thinking something like

<Button size="small" variant="extended" color="primary.dark">Warning</Button>

But this not work, I can't create a custom component to pass only in this button because I'm using two customTheme, so I strictly need to pass the property like color="primary.dark"

CodePudding user response：

You must use this solution.

const theme = createMuiTheme({
   palette: {
      type: dark ? 'dark' : 'light',
   },
})

and use:

<ThemeProvider theme={theme}>

for more information read Article: easily toggle between light and dark theme with material ui

CodePudding user response：

const theme = createMuiTheme({
   palette: {
      type: dark ? 'dark' : 'light',
      primary: {
        main: dark ? darkprimaryColor : lightprimaryColor,
        dark: dark ? grey[100] : orange[100],
        light: dark ? grey[200] : orange[200],
    },
    secondary: {
        main: dark ? darksecondaryColor : lightsecondaryColor,
    },
    info: {
        main: dark ? darkinfoColor : lightinfoColor,
    }
   },
})