Material-UI Theme Generator

Easily generate beautiful and cohesive themes for Material-UI with just a few lines of code.

Features

-🎨 Generate shades around a midpoint color (500)
-🌓 Advanced shade control for both light and dark themes
-🚀 Fast development
-💡 Well-documented
-🌈 Supports custom colors
-🛠️ Default colors included
-🌞 Generate light and dark themes with contrast text

Installation

``bash
npm install mui-theme-generator
`

Basic Usage

`javascript
const { generateTheme } = require('mui-theme-generator');

const theme = generateTheme(); // Uses default colors '#3f50b5' for primary and '#f44336' for secondary
`

Usage with React (using 'import')

`javascript
import { ThemeProvider } from '@mui/material/styles';
import { generateTheme } from 'mui-theme-generator';

// The avaliable properties are primary, secondary, mode, background, info, success, warning and error. Pass an object containing the main colors and the mode for generating the material ui theme object.
const theme = generateTheme({primary: '#4caf50', secondary: '#ff9800', mode: 'dark'});

function App() {
return (

{/ Your components here /}

);
}
`

Generating Light and Dark Themes

`javascript
const { generateTheme } = require('mui-theme-generator');

const theme = generateTheme({primary: '#4caf50', secondary: '#ff9800', mode: 'dark'});

console.log(theme.palette.mode); // Outputs the theme "light" or "dark"
`

Example Output

Here is an example output generated by the generateTheme function:

`json
{
"palette": {
"mode": "dark",
"primary": {
"100": "#000057",
"200": "#00176d",
"300": "#002884",
"400": "#1e3c9c",
"500": "#3f50b5",
"600": "#5b66ce",
"700": "#757ce8",
"800": "#8f93ff",
"900": "#a9abff",
"light": "#5b66ce",
"dark": "#1e3c9c",
"contrastText": "#ffffff",
"main": "#3f50b5"
},
"secondary": {
"100": "#810000",
"200": "#9d0000",
"300": "#ba000d",
"400": "#d72321",
"500": "#f44336",
"600": "#ff5e4b",
"700": "#ff7961",
"800": "#ff9378",
"900": "#ffad90",
"light": "#ff5e4b",
"dark": "#d72321",
"contrastText": "#ffffff",
"main": "#f44336"
},
"warning": {
"100": "#8f3d00",
"200": "#aa5300",
"300": "#c66900",
"400": "#e28000",
"500": "#ff9800",
"600": "#ffb02b",
"700": "#ffc947",
"800": "#ffe261",
"900": "#fffc7a",
"light": "#ffb02b",
"dark": "#e28000",
"contrastText": "#ffffff",
"main": "#ff9800"
},
"error": {
"100": "#810000",
"200": "#9d0000",
"300": "#ba000d",
"400": "#d72321",
"500": "#f44336",
"600": "#ff5e4b",
"700": "#ff7961",
"800": "#ff9378",
"900": "#ffad90",
"light": "#ff5e4b",
"dark": "#d72321",
"contrastText": "#ffffff",
"main": "#f44336"
},
"success": {
"100": "#005100",
"200": "#006709",
"300": "#087f23",
"400": "#30973a",
"500": "#4caf50",
"600": "#66c867",
"700": "#80e27e",
"800": "#99fc96",
"900": "#b3ffaf",
"light": "#66c867",
"dark": "#30973a",
"contrastText": "#ffffff",
"main": "#4caf50"
},
"info": {
"100": "#003f8f",
"200": "#0053a7",
"300": "#0069c0",
"400": "#007fd9",
"500": "#2196f3",
"600": "#4daeff",
"700": "#6ec6ff",
"800": "#8cdfff",
"900": "#a8f9ff",
"light": "#4daeff",
"dark": "#007fd9",
"contrastText": "#ffffff",
"main": "#2196f3"
},
"background": { "default": "#fafafa", "paper": "#f5f5f5" },
"contrastText": "#ffffff"
}
}
``

Support Us :heartpulse:

Love using Material-UI Theme Generator? Help us maintain and improve it by donating via PayPal. Your support will go a long way in keeping this project alive and kicking! :rocket: