New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,404
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Material-UI Mode Addon
storybook addon that provide simple ui to toggle light/dark mode
npm install storybook-addon-mui-mode
Last updated about 1 year ago
1.6k
Downloads per week
Readme View on GitHub

Storybook Addon Material-UI Mode

An addon that provide UI to toggle state between light/dark.

image

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>
  )
}
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI