Changing theme type with MUI createTheme, palette type

Question

In createTheme function on MUI, in the palette section there is a "type" option.

I have created two different palettes with type options dark and light as you can see :

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    type: "light",
    primary: {
      main: "#022B3A",
      dark: "#030316",
    },
    secondary: {
      main: "#1F7A8C",
    },
    background: {
      default: "#232121",
      paper: "#544f4f",
    },
    text: {
      primary: "#ffffff",
    },
    divider: "rgba(49,44,44,0.12)",
  },
  palette: {
    type: "dark",
    primary: {
      main: "#022B3A",
      dark: "#030316",
    },
    secondary: {
      main: "#1F7A8C",
    },
    background: {
      default: "#232121",
      paper: "#544f4f",
    },
    text: {
      primary: "#ffffff",
    },
    divider: "rgba(49,44,44,0.12)",
    typography: {
      fontFamily: ["IBM Plex Sans", "sans-serif"].join(","),
    },
  },
});

With this approach, is it possible to create a button that changes the palette type?

Or should I create different themes and switch between them with a global state?

Answer 1

Here is a live demo showing how you can change the theme from light to dark with a button:

Code:

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';
import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });

function MyApp() {
  const theme = useTheme();
  const colorMode = React.useContext(ColorModeContext);
  return (
    <Box
      sx={{
        display: 'flex',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        bgcolor: 'background.default',
        color: 'text.primary',
        borderRadius: 1,
        p: 3,
      }}
    >
      {theme.palette.mode} mode
      <IconButton sx={{ ml: 1 }} onClick={colorMode.toggleColorMode} color="inherit">
        {theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
      </IconButton>
    </Box>
  );
}

export default function ToggleColorMode() {
  const [mode, setMode] = React.useState('light');
  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
      },
    }),
    [],
  );

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode,
        },
      }),
    [mode],
  );

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <MyApp />
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}