Mui-theme-switcher NPM

mui-theme-switcher

A dark mode theme switcher for Material UI

npm

Install

npm install --save mui-theme-switcher

Usage

In App root (example: `index.js`)

import { ThemeSwitcherProvider } from "mui-theme-switcher";
import { createMuiTheme } from "@material-ui/core";

const lightTheme = createMuiTheme();
const darkTheme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

ReactDOM.render(
  <ThemeSwitcherProvider
    lightTheme={lightTheme}
    darkTheme={darkTheme}
    defaultTheme="dark"
  >
    <App />
  </ThemeSwitcherProvider>,
  document.getElementById("root")
);

In your component (example: `App.js`)

import { useThemeSwitcher } from "mui-theme-switcher";

const App = () => {
  const { dark, toggleDark } = useThemeSwitcher();
  return (
    <Paper>
      <Typography variant="h5">
        Let there be {dark ? "darkness" : "light"}
      </Typography>
      <Button onClick={toggleDark}>Toggle Theme</Button>
    </Paper>
  );
};

Props

Prop	Type	Description
children	`node`	The app which will be themed
darkTheme	`Theme`	Dark variant of the theme. `Theme` object created using `@material-ui`'s `createMuiTheme`
lightTheme	`Theme`	Light variant of the theme. `Theme` object created using `@material-ui`'s `createMuiTheme`
followSystem	`boolean` (default `false`)	Whether the App should follow system/browser theme.
persist	`boolean` (default `false`)	Whether the App should save the theme locally
appId	`string` (Required if using `persist`)	Unique ID of the App.
defaultTheme	enum `"dark" \| "light"`	Default theme of the App
smoothTransition	`boolean` (default `true`)	Whether to smooth out the transition between themes. This only affects the background color