# mui-chameleon

> MUI Chameleon - Theme editor for MUI.

Latest version **0.3.0** (published 2023-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install mui-chameleon
pnpm add mui-chameleon
yarn add mui-chameleon
bun add mui-chameleon
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2023-04-19 |
| First published | 2023-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 213 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Davit Yavryan |
| Maintainers | davit.yavryan |
| Keywords | react, react-component, material design, mui, material-ui, chameleon, mui-chameleon, theme editor |

## Links

- npm: https://www.npmjs.com/package/mui-chameleon
- Repository: https://github.com/davityavryan/mui-chameleon
- Homepage: https://davityavryan.github.io/mui-chameleon
- Issues: https://github.com/davityavryan/mui-chameleon/issues
- npm.io page: https://npm.io/package/mui-chameleon

## Dependencies (2)

- [dlv](https://npm.io/package/dlv.md) ^1.1.3
- [dset](https://npm.io/package/dset.md) ^3.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2023-04-19

## README

<p align="center">
    <a href="https://davityavryan.github.io/mui-chameleon" rel="noopener" target="_blank">
        <img width="256" src="https://raw.githubusercontent.com/davityavryan/mui-chameleon/master/docs/src/static/img/logo.svg?sanitize=true" alt="MUI Chameleon">
    </a>
</p>

<h1 align="center">MUI Chameleon</h1>

<div align="center">

## Warning: [WIP] This is not yet ready for production

[MUI](https://mui.com/) theme editor.

[![npm package](https://img.shields.io/npm/v/mui-chameleon/latest.svg)](https://www.npmjs.com/package/mui-chameleon)
[![npm downloads](https://img.shields.io/npm/dm/mui-chameleon.svg)](https://www.npmjs.com/package/mui-chameleon)
[![BundlePhobia](https://badgen.net/bundlephobia/minzip/mui-chameleon)](https://bundlephobia.com/result?p=mui-chameleon)
[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/davityavryan/mui-chameleon.svg)](https://isitmaintained.com/project/davityavryan/mui-chameleon 'Average time to resolve an issue')

[![Github Action build](https://github.com/davityavryan/mui-chameleon/actions/workflows/build.yml/badge.svg)](https://github.com/davityavryan/mui-chameleon/actions/workflows/build.yml?branch=master&event=push)
[![Github Action test](https://github.com/davityavryan/mui-chameleon/actions/workflows/test.yml/badge.svg)](https://github.com/davityavryan/mui-chameleon/actions/workflows/test.yml?branch=master&event=push)
[![codecov](https://codecov.io/gh/davityavryan/mui-chameleon/branch/master/graph/badge.svg?token=FCLZL0XTXM)](https://codecov.io/gh/davityavryan/mui-chameleon)

[![Buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/davityavryan)

</div>

## Installation

MUI Chameleon is available as an [npm package](https://www.npmjs.com/package/mui-chameleon).

```sh
// with npm
npm install mui-chameleon

// with yarn
yarn add mui-chameleon
```

## Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

import ThemeProvider from 'mui-chameleon/ThemeProvider';
import SideBarEditor from 'mui-chameleon/SideBarEditor';

// import { ThemeProvider, SideBarEditor } from 'mui-chameleon';

function App() {
    const showEditor = true; // of course

    return (
        <ThemeProvider theme={yourInitialTheme}>
            <CssBaseline />

            {/* rest of the app */}

            {showEditor && <SideBarEditor />}
        </ThemeProvider>
    );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

## Acknowledgments

-   Logo Design by Zara Magumyan. See her [Dribbble](https://dribbble.com/zmagumyan) for more awesome designs.
-   Some bundling Tools and scripts are used from [MUI](https://github.com/mui-org/mui) packages. This makes my job
    easier, faster and compatibility of this package better with MUI packages.

## License

This project is licensed under the terms of the [MIT license](/LICENSE.md).

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