material-ui-chameleon

Material-UI Chameleon - Theme editor for Material-UI.

Usage no npm install needed!

<script type="module">
  import materialUiChameleon from 'https://cdn.skypack.dev/material-ui-chameleon';
</script>

README

Material-UI Chameleon

Material-UI Chameleon

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

Material-UI theme editor.

npm package npm downloads BundlePhobia Average time to resolve an issue

Dependencies DevDependencies PeerDependencies

Github Action build Github Action test Cypress dashboard

Buy me a coffee

Installation

Material-UI Chameleon is available as an npm package.

// with npm
npm install material-ui-chameleon

// with yarn
yarn add material-ui-chameleon

Usage

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

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

import ThemeProvider from 'material-ui-chameleon/ThemeProvider';
import SideBarEditor from 'material-ui-chameleon/SideBarEditor';

// import { ThemeProvider, SideBarEditor } from 'material-ui-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 for more awesome designs.
  • Some bundling Tools and scripts are used from Material-UI packages. This makes my job easier, faster and compatibility of this package better with Material-UI packages.

License

This project is licensed under the terms of the MIT license.