Material-UI Mode Addon
storybook addon that provide simple ui to toggle light/dark mode
Storybook Addon Material-UI Mode
An addon that provide UI to toggle state between light/dark.
Works with material-ui v4, v5
Usage
Create decorator in .storybook/preview.js
or inside a story.
// .storybook/preview.js
import { useMemo } from "react";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
const withMuiTheme = (Story, context) => {
const mode = context.globals?.muiMode;
const theme = useMemo(() => createMuiTheme({
palette: {
mode, // for v5
// type: mode // for v4
}
}), [mode])
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
</MuiThemeProvider>
)
}