Material-UI Theme Generator: Easily create beautiful, cohesive Material-UI themes with automatic shade generation. Ideal for fast development and customization.
npm install mui-theme-generatorbash
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"
}
}
``