How to change the default color in Material UI?!

Curious Weekly — writing inspired by curiosity.

The first time using Material UI, my project partner and I did not have time to dig into customizing the theme. The second time I used Material UI, I carved out time to customize the theme.

As a quick background, Material UI is a React UI framework. I’ve really enjoyed using it in my last two projects because it helps turbocharge the feel of your UI to be much more modern.

If you are getting started, this page featuring Material UI templates definitely is not the worst place to start to figure out how to get rolling with this framework.

Okay, back to the fun stuff. Material UI has blue and dark pink built in as the primary and secondary colors for the theme. Suppose you only want to customize the color for now. Suppose you bootstrapped your project with

create-react-app

FIRST: Import createMuiTheme and Theme provider from material-ui/core in the index.js file

import { createMuiTheme, ThemeProvider } from "@material-ui/core";

NEXT: Overwrite the custom palette in index.js

const theme = createMuiTheme({
   palette: {
      primary: {
         main: "#ff8f00" // This is an orange looking color
                },
      secondary: {
         main: "#ffcc80" //Another orange-ish color
                 }
            },
fontFamily: font // as an aside, highly recommend importing roboto font for Material UI projects! Looks really nice
});

Where do you get the hex codes, you ask? Check out the Material UI documentation on colors here. You can also do a lot more with colors than I did, but now this lean implementation is available for you as well.

FINALLY: Wrap your app with the ThemeProvider in the index.js file. N.B. Use <ThemeProvider></ThemeProvider>. Do not use <MuiThemeProvider></MuiThemeProvider>. Learn from my mistakes, please, I insist. Using MuiThemeProvider won’t change the color of the app, but ThemeProvider will.

ReactDOM.render(<ThemeProvider theme={theme}><App /></ThemeProvider>,document.getElementById("root"));

That’s all there is to it! Here’s the final look!

I used this implementation for CoinTiger, which is available for you to check out here.

Curious Weekly — writing inspired by curiosity.