Create a Customized Color Theme in Material-UI
By: Chad Murobayashi
Tags: React, Material Ui, Material Design, Programming, Colors

Create a Customized Color Theme in Material-UI

Making a custom color theme for your next React project is easy

Photo by Sharon McCutcheon on Unsplash

I recently started using Material-UI for all of my React projects and have been enjoying how easy it is to build beautiful interfaces. In this article, I want to explain how to get started with Material-UI and customize a color palette theme to use for your next project.

What is Material-UI?

Material-UI is a React UI framework that follows the principles of Material design. Material design is a design system created by Google. If you are interested to learn more about Material Design, have a look at the video below.

What I like about Material-UI is that it makes customization easy. You can easily change colors, typography, spacing, and more in individual components or globally by customizing the theme. Let’s get started!

Getting Started

First off, I will assume that you are able to set up a basic react app. The easiest way will be to use create-react-app. Once you have your basic app set up, we need to install the Material-UI core package. Open your terminal and run the following code.

// with npm

npm install @material-ui/core // with yarn

yarn add @material-ui/core

Next, we want to clean up the code from our src folder. Delete the CSS files and clean up the App.js file. Your App.js file should look something like this.

import React from 'react'; const App = () => {

return (

<div>App</div>

);

} export default App;

What is the Default Theme?

Material-UI has a default theme that sets default values for breakpoints, typography, color palette, and more. The value that we are interested in here is palette. In the palette object, there are nested objects for primary and secondary, and within each object, there is a light, main, dark, and contrastText property.

You will see that the default main primary palette is set to a bluish color (#3f51b5), and the default main secondary palette is set to a pinkish color (#f50057). These are the values that we will be overriding.

Material-UI Default Palette Theme

Creating a Theme with createMuiTheme

The next step will be to create a custom theme. In your App.js file, import createMuiTheme and ThemeProvider (we will be using this in the next section) from ‘@material-ui/core’. We will then create a theme calling the createMuiTheme function. In the function, we will pass in an object as the argument and set the main value for the primary and secondary color palettes. This will override the default theme, and set a new color palette for our project. You only need to set the main color, as Material-UI will automatically set the light and dark colors for us based on the value of the main color. It will look something like this.

import { createMuiTheme, ThemeProvider } from '@material-ui/core'; const theme = createMuiTheme({

palette: {

primary: {

main: "HEXADECIMAL COLOR"

},

secondary: {

main: "HEXADECIMAL COLOR"

}

}

});

Please note that in the Material-UI documentation, they show an example of importing purple and green from the Material-UI core package. This is another way you can set the color, but I find that just using a hexadecimal value has been an easier approach for me.

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

import purple from '@material-ui/core/colors/purple';

import green from '@material-ui/core/colors/green';



const theme = createMuiTheme({

palette: {

primary: {

main: purple[500]

},

secondary: {

main: green[500]

}

}

});

Here is the fun part! Choose two colors that you want to use as the primary and secondary colors for your app. This color tool from Material.io has helped me when choosing the right colors. It will show you examples of where and when the primary and secondary colors will be used, and you can get a visual image of the color scheme working together. Play around with it until you find the two colors you want to use.

Choosing the right color palette for your application is not easy. If you are just starting out, I recommend choosing colors that you like and think look good, and not spending too much time worrying about this initially. By customizing the theme this way, it makes it easy to change your color scheme later in your project if you choose to do so.

If you are like me and not great at design and choosing a color palette that will be effective, here is an article that can give you some insights on choosing the right colors for your website.

Using the ThemeProvider Component

Now that you have chosen your color palette and created a theme, it is time to implement the theme into your project. We can do this by using the ThemeProvider component. The ThemeProvider component will wrap any components that will be using our custom theme. It should ideally be at the root of the component tree. We will pass a theme prop to this component which will be equal to the theme object you created earlier.

<ThemeProvider theme={theme}>

COMPONENTS TO USE THEME

</ThemeProvider>

Wrapping Up

If you followed this far, your final App.js file should look something like this. In the example below, I also imported the Button component from the Material-UI library and am rendering two buttons. One is with the primary color and one is with the secondary color.

The output should look like this. As you can see, another great thing that Material-UI does for us is it automatically changes the text color for us. The primary color is set to a dark green color, so the text is light, while the secondary color is set to a lighter orange color, so the text is dark.