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.