mui-palette-mode

Toggle dark or light mode for your MUI apps

Install

npm i mui-palette-mode

Usage

import { AppBar, Toolbar, Typography, createTheme } from '@mui/material';
import { DualThemeProvider, PaletteModeButton } from 'mui-palette-mode';

const lightTheme = createTheme();
const darkTheme = createTheme({ palette: { mode: 'dark' } });

export default function App() {
  return (
    <DualThemeProvider lightTheme={lightTheme} darkTheme={darkTheme} defaultPaletteMode="auto">
      <AppBar position="static" color="primary">
        <Toolbar>
          <Typography flexGrow={1}>Click the button on the right 👉</Typography>
          <PaletteModeButton />
        </Toolbar>
      </AppBar>
    </DualThemeProvider>
  );
}

API

<DualThemeProvider/>

Provider to support dark/light theme switching.

lightTheme: Theme

MUI theme for light mode.

darkTheme: Theme

MUI theme for dark mode.

defaultPaletteMode: 'light' | 'dark' | 'auto'

Default value: 'auto'

Default palette mode if user hasn't choose one. Palette mode is saved in localStorage (key: theme_palette_mode).

icons: Record<'light' | 'dark' | 'auto', ReactNode>

Default value:

{
  auto: <BrightnessMedium />,
  light: <LightMode />,
  dark: <DarkMode />,
};

Customize palette mode menu text.

messages: Record<'light' | 'dark' | 'auto', ReactNode>

Default value:

{
  auto: 'Auto',
  light: 'Light',
  dark: 'Dark',
}

Customize palette mode menu text.

<PaletteModeButton/>

The icon button to toggle color modes. Support all MUI <Button/> component props.

<PaletteModeIconButton/>

The button to toggle color modes. Support all MUI <IconButton/> component props.

<PaletteModeListItemButton/>

The icon button to toggle color modes. Support all MUI <ListItemButton/> component props.

usePaletteMode()

The hook to get and set color mode.

const {
  paletteMode,
  userPaletteMode,
  setUserPaletteMode,
  toggleUserPaletteMode,
  icon,
  icons,
  message,
  messages,
} = usePaletteMode();