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

npm install mui-theme-generator

Basic Usage

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

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

Usage with React (using 'import')

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 (
    <ThemeProvider theme={theme}>
      {/* Your components here */}
    </ThemeProvider>
  );
}

Generating Light and Dark Themes

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:

  {
  "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: