# storybook-addon-mui-mode

> storybook addon that provide simple ui to toggle light/dark mode

Latest version **0.0.14** (published 2021-09-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install storybook-addon-mui-mode
pnpm add storybook-addon-mui-mode
yarn add storybook-addon-mui-mode
bun add storybook-addon-mui-mode
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2021-09-19 |
| First published | 2021-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 41.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | siriwatknp |
| Maintainers | siriwatknp |
| Keywords | storybook-addons, material-ui |

## Links

- npm: https://www.npmjs.com/package/storybook-addon-mui-mode
- Repository: https://github.com/siriwatknp/storybook-addon-mui-mode
- Homepage: https://github.com/siriwatknp/storybook-addon-mui-mode#readme
- Issues: https://github.com/siriwatknp/storybook-addon-mui-mode/issues
- npm.io page: https://npm.io/package/storybook-addon-mui-mode

## Dependencies (1)

- [react-select](https://npm.io/package/react-select.md) 4.3.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.0.14 (latest) — 2021-09-19
- 0.0.13 — 2021-09-19
- 0.0.12 — 2021-09-19
- 0.0.11 — 2021-06-26
- 0.0.10 — 2021-06-26
- 0.0.9 — 2021-06-26
- 0.0.8 — 2021-06-25
- 0.0.7 — 2021-06-25
- 0.0.6 — 2021-06-25
- 0.0.5 — 2021-06-25
- 0.0.4 — 2021-06-25
- 0.0.3 — 2021-06-24
- 0.0.2 — 2021-05-12
- 0.0.1 — 2021-05-12

## README

# Storybook Addon Material-UI Mode

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

![image](https://user-images.githubusercontent.com/18292247/117999815-6f996e00-b36f-11eb-9504-659bbe249e3c.png)

> Works with material-ui v4, v5

## Usage

Create decorator in `.storybook/preview.js` or inside a story.

```js
// .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>
  )
}
```

---
_Source: https://npm.io/package/storybook-addon-mui-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._