How to create custom theme in MUI

Material UI (MUI) is one of the most common library used to build your react application. It provides various UI tools to buid your design. And of the best feature of MUI is its powerful theming system, which allows you to customize colors, typography, spacing and all in more centralized way. So that you can match the desing or color pallets according to your application theme.

Lets explore how to change the colors of the default theme provided by MUI.

Below are the steps to create and apply custom themes globally.

Step 1: Install MUI

npm install @mui/material @emotion/react @emotion/styled

npm install @mui/material @emotion/react @emotion/styled

Step 2: Create a Custom Theme

define your custom theme using createTheme()

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#F2B2C0'
    },
    secondary: {
      main: '#F2EAE0'
    }
  }
}

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#F2B2C0'
    },
    secondary: {
      main: '#F2EAE0'
    }
  }
}

above code snippet overrides the primary and secondary color of default theme.

Step3: Apply Theme Globally using ThemeProvider

import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
import theme from './theme/theme';

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">Primary Button</Button>
      <Button variant="outlined" color="secondary">Secondary Button</Button>
    </ThemeProvider>
  );
}

import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
import theme from './theme/theme';

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">Primary Button</Button>
      <Button variant="outlined" color="secondary">Secondary Button</Button>
    </ThemeProvider>
  );
}

Now all the components inside ThemeProvider which uses primary or secondary color will get overriden colors by custom theme provider.

You must be thinking what is the best place to create a custom theme in your react application. I would suggest to create a seperate file under theme folder.

src/
  theme/
    theme.js => Define your custom theme here
  components/
  app.js
  index.js

src/
  theme/
    theme.js => Define your custom theme here
  components/
  app.js
  index.js

Similar way you can change the typography and mode (dark / light). You can find out the more details on How to customize page of MUI

Home » How to create custom theme in MUI