mui-theme-switcher

A dark mode theme switcher for Material UI

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

License

MIT ©

---

This hook is created using create-react-hook.