https://in-your-saas.github.io/material-ui-theme-editor/

Theme editor for material UI
https://in-your-saas.github.io/material-ui-theme-editor/

css-in-js material-design material-ui react wysiwyg

Last synced: 25 days ago
JSON representation

Theme editor for material UI

• Host: GitHub
• URL: https://in-your-saas.github.io/material-ui-theme-editor/
• Owner: in-your-saas
• Archived: true
• Created: 2018-09-12T19:14:04.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-12-11T14:41:37.000Z (about 4 years ago)
• Last Synced: 2024-08-05T01:11:11.999Z (4 months ago)
• Topics: css-in-js, material-design, material-ui, react, wysiwyg
• Language: JavaScript
• Size: 2.93 MB
• Stars: 98
• Watchers: 7
• Forks: 52
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-material-ui - material-ui-theme-editor - A tool to generate themes for your Material UI applications that features live previewing. (Related Projects)

README

        
# Material UI theme editor

Click [here](https://in-your-saas.github.io/material-ui-theme-editor/) to access it

## What is it made for?

I'm a developer that loves to work with [MaterialUI](https://material-ui.com/) but it generates always the same looking websites.

That's when a designer arrives and tell you "You've to use this color, and this color...", and it's a pain to integrate, you cannot make

it fit with your MaterialUI theme, etc, just because your designer isn't really aware of what you use and what are the limits.

So now, give this website to your designer, and wait for him to give you the theme file. And then, to integrate it, you just have to do

the following

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

import Application from './your/entry/point';

import yourRawTheme from './wherever/is/your/theme.json';

const theme = createMuiTheme(yourRawTheme);

ReactDOM.render(

  

    

  

, document.getElementById('root'));

```

And BOOOM! You have a nice theme, you designer is happy, and you didn't fight with him/her...