Material-UI Theme configuration

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:

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

<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, 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 based on material desing guidelines or you can develop your own band palette

Typography

Let you change the font family and size.

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.

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:

<Button variant="contained" color="primary">
  Primary  
</Button>

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

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

You can see the code here