🍑Local MUI Theme

Customize Material-UI with your theme. You can change the colors, the typography and much more.

How to use

Here we use Material UI for support local theme project. The installation method is as follows below.

Step 1: Set up THEME configs

Adding file & code in ./src/styles/mui/theme.js

// Vendors
import { createTheme } from '@mui/material/styles';

// Styles
import buttonStyled from './button';

const defaultTheme = createTheme();

// A custom theme for this app
export const modifyTheme = {
  palette: {
    common: {
      black: '#000000',
      white: '#ffffff',
    },
    primary: {
      main: '#F04B32',
    },
    secondary: {
      main: '#DADCE5',
    },
    error: {
      main: '#F04B32',
    },
    background: {
      default: '#ffffff',
    },
    social: {
      wa: '#25D366',
      ig: '#DD2A7B',
      fb: '#1877F2',
      tw: '#1DA1F2',
      yt: '#FF0000',
    },
  },
  typography: {
    fontFamily: ['"Montserrat"', 'sans-serif'].join(','),
  },  
};

const theme = createTheme({
  ...modifyTheme,
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: buttonStyled(modifyTheme),
    },
  },
});

export default theme;

Step 2: Import script in the ./src/pages/_app.js

// Vendors
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// Styles
import theme from '@/styles/mui/theme';

Step 3: Add code ThemeProvider

const App = (props) => {
    ...
    return (
        ...
        <ThemeProvider theme={theme}>
            <CssBaseline />
            ...
        </ThemeProvider>
        ...
    )
};

export default App;

Step 4: Add component for restyling

Adding file & code in ./src/styles/mui/button.js

const buttonStyled = (theme) => ({
  root: {
    borderRadius: 8,
  },
});

export default buttonStyled;

More info you can check here https://mui.com/customization/theme-components