Muhi Masri

MUI Custom Colors: How to Customize Colors and Themes in Material UI

Learn how to customize Material UI Colors and Themes using React and MUI

Last updated on July 18, 2022

react
mui
Material Colors

In this tutorial, we will learn how to customize colors in Material UI by creating a new theme and adding a set of new colors. Below is the complete working code example:

We’re going to work on two main areas to get this running properly:

  1. Customizing the MUI theme to make the new colors accessible anywhere in the application.
  2. Creating a new set of color fades specific to the brand we are using.

Install MUI

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

Emotion library is required to create React components that have styles attached to them.

Customize MUI theme colors

Let’s assume we want to change the button color. We can easily add a new background color as follows and call it a day:

<Button sx={{ bgcolor: "green" }}>
  Primary
</Button>

But the problem is that since we follow a specific design system, we’ll have to make the exact change many times across different components (header, tabs, links, checkbox, etc.). This approach is redundant and hard to scale as the application grows bigger and bigger.

Below, we can see how the change only affected one button but not the rest of the components:

Default Theme

For that reason, MUI provides us with a ThemeProvider component in order to inject a theme into our application.

Let’s create a new theme in the main app component to override the primary and secondary colors and then pass it into the ThemeProvider. The new colors we are using are green and purple (#2a9461 and #494c7d).

import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#2a9461"
    },
    secondary: {
      main: "#494c7d"
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      // MUI components
    </ThemeProvider>
  );
}

There is a specific structure to the theme that we need to follow to customize values. This link contains the list of all properties that can be customized in the MUI theme. In our case, we are modifying the palette object.

Here is how it looks after creating a new theme:

Custom Theme

All components now reflect the new primary and secondary colors!

Create new color palettes and fades

In this section, we’d like to introduce different fades to primary and secondary colors. Different fades of the same brand color are essential as it allows us to add a lighter and darker option. A button hover is a good example because a darker fade appears as we hover over a button:

MUI already comes with a set of colors and fades. For example, we can import the green colors and use one of the fades as a primary color:

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { green } from "@mui/material/colors";

const theme = createTheme({
  palette: {
    primary: {
      main: green[300]
    },
    secondary: {
      main: "#494c7d"
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      // MUI components
    </ThemeProvider>
  );
}

If we look into the source code, we can see all the fades they provide:

Green palette

But there is a caveat, not every green palette is the same. The one MUI provides won’t work with our primary color, so we need to add custom color fades.

Usually, the designer provides us with all the necessary fades. But for now, we can use a helpful tool from the Material Design team that can autogenerate it for us from the primary and secondary hex values we added in the first section (#2a9461 and #494c7d).

Let’s create a new color.js file that exports all the fades we just generated:

export const green = {
  50: "#dbece2",
  100: "#a7d0b8",
  200: "#6eb18b",
  300: "#2a9461",
  400: "#008044",
  500: "#006c27",
  600: "#006020",
  700: "#005116",
  800: "#00410b",
  900: "#002700"
};

export const purple = {
  50: "#e9eaf0",
  100: "#c7cada",
  200: "#a3a8c1",
  300: "#8186a7",
  400: "#686c95",
  500: "#505485",
  600: "#494c7d",
  700: "#414371",
  800: "#393964",
  900: "#2d2a4c"
};

Now, we can import the colors and use them in the new theme we created earlier:

import { green, purple } from "./colors";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: green[300],
      dark: green[500]
    },
    secondary: {
      main: purple[600],
      dark: purple[800]
    }
  }
});

We also added a new dark value in the primary color, which is used in button hover and other places.

Summary

Congrats! We just learned how to customize colors using MUI Theme Provider and create a new set of color tokens.

I hope you enjoyed learning from this tutorial and if you have any questions, please leave a comment below.

Bye for now!

Recommended Reading

Learn how to make a MUI Button behave like a Link with Material UI and React

react
mui

Discussion

Master your front-end development techniques 🌟

Subscribe to stay up-to-date and receive quality front-end development articles straight to your inbox!

No spam, sales, or ads. Unsubscribe anytime you wish.

© 2022, Muhi Masri