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.

The addition of local MUI theme will affect some of the Qasir UI this is because there are several code styles that will conflict.

Step 1: Set up THEME configs

Adding file & code in ./src/styles/override/material-ui/theme.js

// Vendors
import { createTheme } from '@material-ui/core/styles';

const defaultTheme = createTheme();

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

const theme = createTheme({
  ...modifyTheme,
  overrides: {
    MuiCssBaseline: {
      '@global': {
        body: {
          backgroundColor: '#F2F4F7',
        },
      },
    },
    MuiButton: {
      ...
    },
  },
});

export default theme;

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

// Material UI
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

// Theme
import theme from '@/override/material-ui/theme';

Step 3: Add code ThemeProvider

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

export default App;

More info you can check here https://material-ui.com/customization/components/#global-theme-override