mui-theme-switcher

Mui <ThemeProvider> replacement, providing context for theme switching.

This version supports only mui v5, if want a theme switcher for @material-ui v4 please visit https://www.npmjs.com/package/@nntc-registry/mui-theme-switcher-v4.

Installation

yarn add @nntc-registry/mui-theme-switcher

Usage

  import ThemeContext from '@nntc-registry/mui-theme-switcher'

  function App() {
    return (
      <ThemeContext 
        baseTheme={theme}
        colorThemes={colorThemes}
      >
        {
          // ...your app
        }
      </ThemeContext>
    )
  }

Props and typings

  baseTheme: Theme
  // default Theme type from @mui/material

  colorThemes: ColorTheme[]

  interface ColorTheme {
    colorMode: string;
    palette: PaletteOptions; //default PaletteOptions type from @mui/material
  }

I recommend to not include colors styling in your baseTheme and only use it for shaping. You may specify colors in colorTheme.

If colorThemes prop is undefined, ThemeContext will set baseTheme. If baseTheme prop is undefined, ThemeContext will set default MUI theme like in an example below.

  theme = createTheme({}, colorThemes);

Switching themes

  import { useContext } from 'react';
  import { ColorModeContext } from '@nntc-registry/mui-theme-switcher';

  function Component() {
    const colorMode = useContext(ColorModeContext);

    return (
      <>
        <button onClick={() => colorMode.setColorMode('light')}>
          Set theme to light
        </button>
        <button onClick={() => colorMode.setColorMode('dark')}>
          Set theme to dark
        </button>
      </>
    )
  }

setColorMode accepts any string as an argument so be careful or type a function yourself to avoid type conflicts.