Material-UI Theme configuration
Tags: materialui, react
Published: 2021-01-30 03:22:20

A theme allows you to establish a consistent design throughout the application and helps to meet the design requirements of your business or Brand.
Material-UI has a default theme you can customize, i’m going to show how configure Material-UI on a React App for light and dark theme. 

Firts, in the root folder of your react app you need to install material ui and material ui icons with the sentences: 
```node
npm install @material-ui/core

npm install @material-ui/icons 
```
If you want to use Roboto fonts, you have to add next line on your index.html 

```html
<link rel="stylesheet" 
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> 
```
###Configuring the theme

You can see the default theme configuration [here](https://material-ui.com/customization/default-theme/), the theme object contains all properties you can change. 

In the src folder add a file theme.js, i’m going to create a new folder theme inside my src folder and inside a theme.js file and overwrite the palette and typography properties. 

Using createMuiTheme you create a new theme overriding the default configuration with the new values 

####Palette
Palette object contains the colors for material ui componentes and you can define mode ligth or dark (type property) for your application. 
You can use the [material ui palettes] (https://material-ui.com/customization/color/#color-palette) based on material desing guidelines or you can develop your own band palette

####Typography
Let you change the font family and size. 

```javascript
import { createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import blue from '@material-ui/core/colors/blue';

const theme = createMuiTheme({
  palette: {
    type: "ligth",  
    primary: {
      main: indigo[900],
    },
    secondary: {
      main: blue[300],
    },
  },
  typography: {   
    fontFamily:'Roboto',
    fontSize: 14,    
  },
});
export default theme; 
```
 
Once the theme is configured we use the ThemeProvider component to apply the theme to the entire application, for this we add it in our index.js. If you want to use dark mode you have to include your App in a Paper component otherwise you can't see the dark mode on screen.  

```react
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme/theme';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Paper style={{height:"100vh", width:"100vw", }}>
      <App />
    </Paper>
  </ThemeProvider>,
  document.getElementById('root')
);
```
Now adding an AppBar, Buttons and Inputs components we can see the theme colors according theme specifications, for example:  
```jsx
<Button variant="contained" color="primary">
  Primary  
</Button>

<Button variant="contained" color="secondary">
  Secondary  
</Button>

<Button variant="contained" >
  Default  
</Button>
```

![Ligth Mode](https://dev-to-uploads.s3.amazonaws.com/i/psatwq0yv1wa60hm9nb9.JPG)

![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/i/zsxcidwn0niu4xydaz41.JPG)

You can see the code [here](https://github.com/vega0507/muithemeconfig)