Create Your Own Custom Theme in React Material UI

Material UI aka MUI has been the most widely used library in React among developers. It's comprehensive documentation has made things so flexible and adaptable with the intent that it becomes relatively easy to reuse certain features and functionality while building our React applications.

In simple terms, theming can be implemented by depicting the color of the component, what style of text is used, shadow levels, opacity and much more. In order to meet certain requirements for a brand or an application, theming permits us to customize almost all design related areas. Nowadays, for fully furnishing and deploying our apps, light and dark mode themes have become favored and admired. By default, components use the light theme mode.

In this article, I will be walking through over creating our own custom theme and injecting it our applications. To make things specific, I will be using Material Ui v5 for theming and customize it according to our style and need. For an extensive detailed implementation, follow and refer React Material UI v5

Create A Custom Theme

MUI exhibits the createTheme() method which accepts a custom theme object as an argument seen below:

const useTheme = createTheme({
  palette: {
    secondary: {
      main: orange[500]
    }, 
    primary: {
      main: '#0052cc',
    },
  },
  typography: {
    fontSize: 16
    fontFamily: "Raleway"
  }
});

export default useTheme;

Using the ThemeProvider Component

We would now be using the ThemeProvider component in order to customize the MUI theme and inject it in our application. This will wrap any other components that will be using our customized themes. ThemeProvider should be at the root of the project, if we need to apply all the required changes throughout our application. We will be passing the theme prop to this component which will be the same as what we have created above:

<ThemeProvider theme={useTheme}>
   <Button variant="contained" color="secondary">
       Hello React
   </Button>
</ThemeProvider>

Wrapping Up

We are also able to comprehend that MUI automatically changes the text color for us. For example, As we can see from our code snippet, The secondary color is set to a light shade orange color, so the text color is black.

Thanks for reading! Hope you find this article insightful in order to get started with MUI and customize themes for your next React project. For more information on how to create your customized color palette, you can view MUI Palette