https://github.com/react-theming/create-mui-theme

online tool for creating material-ui themes
https://github.com/react-theming/create-mui-theme

material-design material-ui online theme-development themes theming tool

Last synced: 4 days ago
JSON representation

online tool for creating material-ui themes

• Host: GitHub
• URL: https://github.com/react-theming/create-mui-theme
• Owner: react-theming
• License: mit
• Created: 2018-07-22T21:43:29.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-28T09:13:38.000Z (over 6 years ago)
• Last Synced: 2024-08-01T13:34:41.092Z (3 months ago)
• Topics: material-design, material-ui, online, theme-development, themes, theming, tool
• Language: JavaScript
• Homepage: https://react-theming.github.io/create-mui-theme/
• Size: 14.7 MB
• Stars: 88
• Watchers: 3
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-ccamel - react-theming/create-mui-theme - online tool for creating material-ui themes (JavaScript)
• awesome-material-ui - Create Material-UI Theme - Online tool for creating Material-UI themes via Material Design Color Tool. (Theming)

README

        

[![Live demo](https://img.shields.io/badge/Live%20Demo-gh--pages-brightgreen.svg)](https://react-theming.github.io/create-mui-theme/)

# Create Material-UI Theme:  + 

Online tool for creating Material-UI themes via Material Design Color Tool (https://material.io/tools/color)

1. Open `Color Tool` https://material.io/tools/color and `Create MUI Theme` https://react-theming.github.io/create-mui-theme/

2. Select colors of your choice in `Color Tool`

3. Copy-paste URL from `Color Tool` browser tab to the input field in `Create MUI Theme` and click ADD (or simply drag & drop by mouse)

4. Take auto-generated code below and use it in your project

[![Demo1](/docs/screencast1.gif)](https://raw.githubusercontent.com/react-theming/create-mui-theme/master/docs/screencast1.gif)

## Example

Drag & Drop this URL onto page

>https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=AD1457&secondary.color=03A9F4&secondary.text.color=FAFAFA

## Usage

You can use this auto-generated code with any your project which uses Material-UI of version 1.0.0 and above. For example you can start with [Create Material-UI App](https://github.com/react-theming/create-material-ui-app). Generated themes are compatible with with [Storybook Addon Material-UI](https://github.com/react-theming/storybook-addon-material-ui)

## Related links

- https://material.io/tools/color

- https://material-ui.com/style/color/#material-color-tool

- https://material-ui.com/customization/themes/

- https://react-theming.github.io/create-mui-theme/

## Support

You can support this project with your stars and RT

https://twitter.com/UsulPro/status/1022781130246905856

## CONTRIBUTING

Any contributions are very welcome!

#### Credits

[telegram:@usulpro](https://t.me/usulpro) (The quickest way to contact me :zap:)

[![@UsulPro](https://img.shields.io/badge/github-UsulPro-blue.svg)](https://github.com/UsulPro)

[![@react-theming](https://img.shields.io/badge/github-React%20Theming-red.svg)](https://github.com/react-theming)

[![GitHub release](https://img.shields.io/github/release/react-theming/create-mui-theme.svg)](https://github.com/react-theming/create-mui-theme)