UNPKG

mui-theme-generator

Version:

Material-UI Theme Generator: Easily create beautiful, cohesive Material-UI themes with automatic shade generation. Ideal for fast development and customization.

158 lines (142 loc) 4.28 kB
# 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 ( <ThemeProvider theme={theme}> {/* Your components here */} </ThemeProvider> ); } ``` ## 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](https://www.paypal.com/donate/?hosted_button_id=C2T5CHZYKXEE4). Your support will go a long way in keeping this project alive and kicking! :rocket: