How to Customize Material-ui theme v3.2.0 (Part 2)

In this part, I will show you how to customize global variables in material-ui. Firstly, let’s look at the design

Firebase Official Demo Project

From part 2–4, we will replicate this Firebase page. The reason I choose Firebase is because it implements material design. As you can see in the picture above, there are many components that we will customize such as Drawer (the dark left panel), Buttons, AppBar (the blue bar), Paper, Tabs.

Sound’s interesting?. Let’s get started.

  1. Pull this project. https://github.com/siriwatknp/tutorial-mui-theming
result page after you run the project (don’t forget to checkout tag “get-started”)

Here, I will give you some tricks I have been using for a while which I found it very interesting for many projects I encounter. When you first saw design, don’t rush to code. You should dissect the design, categorise components base on type, and logic-interaction because one of the most important concept of React is modularity. In this design, I won’t bind any logic for simplicity, so I dissect it into 3 parts

  • Navigator (the panel on the left)

I use a bit of react-emotion to combine these parts to web page, basically it’s just plain css. You will found it in App.js. It is ok, if you don’t understand it completely. That won’t affect our tutorial.

Secondly, you should know a bit about the structure of global variables. here it is.

Material-ui default theme

1. Color

We will first focus on palette because it is the most easy part.

Let me remind you about Material Color System. Primary color is the color that appear most in the web. Secondary color is the color that give attention to users. Now I you to think about the primary and secondary color in Firebase ? Tik-tok, Tik-tok.

Firebase Official Demo Project

In my Opinion, the primary color is the blue one (#039be5). Secondary? No.

I am sure that a lot of you won’t agree with me because I just told u that primary color is the color that appear most. Obviously, the blue color is not the majority. Well, I would say that the reason I choose blue because the button has blue, Link has blue and the active color is also blue (the word “Authentication” in the left panel). It must be blue.

If you still doubt, you will agree with me in a moment. Just keep reading…

Right now, we are ready to change primary variable.

Material Color Tool

I recommend using color tool from material design website. As you can see, after I filled the color, I got the color’s variants automatically. Pretty cool, hah.

Open the project and go to /src/theme/muiTheme.js then change to this.

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

const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
primary: {
light: '#63ccff',
main: '#009be5',
dark: '#006db3',
contrastText: '#fff',
},
},
});

export default theme;

tadah!. our page seems a bit more like Firebase. Though, a long way to go.

our page after update primary color

2. Border

border comparison between Firebase and Us

By default material-ui border is set to 4px . We have to change it to 8px to match Firebase. Again in /src/theme/muiTheme.js

shape: {
borderRadius: 8
}
our page after update border radius

tadah!. our page seems a bit more and more like Firebase.

3. Shadow

Obviously, shadow is another thing that separate us from Firebase. However, shadows in default theme is already well-defined.

shadows in default theme

In Firebase, app bar and button has no shadow. We gonna fix them in each component theme. Now, There is nothing we can do more in global variable. So, That’s it. Thank you for reading, See you next part. Be prepared, next part we gonna dive deeply in each component.

If you like this story, please share and give me a round of applause. You can give me up to 50!!, if you want. I really appreciate that. Ye Hah!

Passionate in Design, Theming, React & Firebase. Focus on component reusability.