All Projects → in-your-saas → material-ui-theme-editor

in-your-saas / material-ui-theme-editor

Licence: other
Theme editor for material UI

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to material-ui-theme-editor

boss-lite
Boss Lite - React Redux Material Admin Template
Stars: ✭ 148 (+60.87%)
Mutual labels:  material-ui, css-in-js
Next Shopify Storefront
🛍 A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
Stars: ✭ 317 (+244.57%)
Mutual labels:  material-ui, css-in-js
netease-music-app
网易云音乐移动端【React/Next/Vue】【Ant Design/Material UI】
Stars: ✭ 95 (+3.26%)
Mutual labels:  material-ui
tinymce4
TinyMCE4-Editor für REDAXO 5
Stars: ✭ 21 (-77.17%)
Mutual labels:  wysiwyg
wface
Enterprise web application platform based on ReactJS
Stars: ✭ 19 (-79.35%)
Mutual labels:  material-ui
mdm
一款Hexo端优美的MaterialDesign风格主题,简洁,轻巧,麻麻再也不用担心打开博客速度慢了
Stars: ✭ 27 (-70.65%)
Mutual labels:  material-ui
material-design-collection-ecommerce
Material Desgin for Collection Ecommerce - React Native UI Theme. It helps you create the collection screen quickly and professionally. It's easy to customize and develop.
Stars: ✭ 27 (-70.65%)
Mutual labels:  material-ui
react-native-css-in-js-benchmarks
CSS in JS Benchmarks for React Native
Stars: ✭ 46 (-50%)
Mutual labels:  css-in-js
lowcode
React Lowcode - prototype, develop and maintain internal apps easier
Stars: ✭ 32 (-65.22%)
Mutual labels:  material-ui
draftjs-conductor
📝✨ Little Draft.js helpers to make rich text editors “just work”
Stars: ✭ 39 (-57.61%)
Mutual labels:  wysiwyg
hacklympics
🏆 Full-stack online programming examination system
Stars: ✭ 44 (-52.17%)
Mutual labels:  material-ui
tmdb-viewer
A movie browsing/favoriting app
Stars: ✭ 63 (-31.52%)
Mutual labels:  material-ui
react-point-of-sale
A simple point of sale app built in nodejs and reactjs
Stars: ✭ 185 (+101.09%)
Mutual labels:  material-ui
OwlBottomSheet
Simple library to show a bottom sheet like Owl app from Material Design studies cases
Stars: ✭ 44 (-52.17%)
Mutual labels:  material-ui
glory
The world fastest framework agonistic CSS-in-JS library. Available in any frontend framework you use, like React, Vue and Svelte.
Stars: ✭ 20 (-78.26%)
Mutual labels:  css-in-js
ct-soft-ui-dashboard-pro-react
Soft UI Dashboard PRO React - Premium Dashboard using React and Material UI
Stars: ✭ 16 (-82.61%)
Mutual labels:  material-ui
typekev-site
My personal website built, of course, with React
Stars: ✭ 22 (-76.09%)
Mutual labels:  material-ui
rescript-material-ui
ReScript bindings for Material-UI
Stars: ✭ 222 (+141.3%)
Mutual labels:  material-ui
SwingMaterialDesign
A Material Design components for java swing. Trying to make java swing more beautiful and vivid. with shadows and ripples.
Stars: ✭ 21 (-77.17%)
Mutual labels:  wysiwyg
isotope
UI library that aims to bring simplicity and intuitiveness back to Web Development. 🚀
Stars: ✭ 52 (-43.48%)
Mutual labels:  css-in-js

Material UI theme editor

Click here to access it

What is it made for?

I'm a developer that loves to work with MaterialUI 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

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(
  <MuiThemeProvider theme={theme}>
    <Application />
  </MuiThemeProvider>
, document.getElementById('root'));

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].