Themes are very essential in a web application as they provide a consistent tone throughout the application. It is used to control and set values for the color, the background, font properties, shadow-levels, opacity, etc.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app gfg
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd gfg
Step 3: After creating the ReactJS application, Install the material-uimodules using the following command.
npm install @material-ui/core
Step 4: Head to public/index.html and add the fonts to your <head>:
<link rel="stylesheet" href=
"https://fonts.googleapis.com/css2family=Open+Sans:wght@300
&family=Raleway:wght@300&family=Roboto
&display=swap">
Now, create a new file theme.js in the src folder where we’ll define our theme objects.
Project Directory: It will look like this:
Theming in Material-UI: Material UI provides a ThemeProvider component that one can use to inject a theme into the application.
The way theme works are that we define a theme object first using createMuiTheme() and then pass this object to the <ThemeProvider> component wrapping the whole template which needs to be themed.
Acc. to docs – “<ThemeProvider> relies on the context feature of React to pass the theme down to the components” which means it injects theme to all the components in the template. Since by default each component has styling properties set to primary (e.g.- appbar color is set to “primary” by default which means its background color will be whatever the primary. main value of the theme object is). So each component’s default styling now is set via theme.
If needed, component colors or styles can be overridden and changed by either explicitly setting values to every single component or by having another nested <ThemeProvider theme={theme2}> wrapper around the required section of components.
Defining a theme object: The responsiveFontSizes() function enables us to have viewport responsive text sizes.
theme.js
Javascript
import { createMuiTheme, responsiveFontSizes }
from '@materialui/core/styles';
const theme = responsiveFontSizes(createMuiTheme({
}));
|
Now, we’ll go ahead and change some pre-defined theme configuration variables.
Spacing: It helps create consistent spacing between the elements of our UI.
spacing: 4,
Typography: Typography is where we define different font variants that are then used in the component templates via the ‘Typography’ component.
typography: {
fontFamily: [
'Roboto',
'Raleway',
'Open Sans',
].join(','),
h1: {
fontSize: '5rem',
fontFamily: 'Raleway',
},
h2: {
fontSize: '3.5rem',
fontFamily: 'Open Sans',
fontStyle: 'bold',
},
h3: {
fontSize: '2.5rem',
fontFamily: 'Roboto',
},
},Palette: Palette is where we define the colors to be used in our React app. The theme exposes the following predefined palette colors – primary, secondary, error, warning, info, success, and text for typography colors.
palette: {
background: {
default: '#009900',
},
primary: {
main: '#2B37D4',
},
secondary: {
main: '#E769A6',
},
error: {
main: '#D72A2A',
},
warning: {
main: '#FC7B09',
},
info: {
main: '#6B7D6A',
},
success: {
main: '#09FE00',
},
text: {
primary: '#000000',
secondary: '#FFFFFF',
},
},Example:
theme.js
Javascript
import { createMuiTheme, responsiveFontSizes }
from '@material-ui/core/styles';
const theme = responsiveFontSizes(createMuiTheme({
spacing: 4,
typography: {
fontFamily: [
'Roboto',
'Raleway',
'Open Sans',
].join(','),
h1: {
fontSize: '5rem',
fontFamily: 'Raleway',
},
h2: {
fontSize: '3.5rem',
fontFamily: 'Open Sans',
fontStyle: 'bold',
},
h3: {
fontSize: '2.5rem',
fontFamily: 'Roboto',
},
},
palette: {
background: {
default: '#009900'
},
primary: {
main: '#2B37D4',
},
secondary: {
main: '#E769A6',
},
error: {
main: '#D72A2A',
},
warning: {
main: '#FC7B09',
},
info: {
main: '#6B7D6A',
},
success: {
main: '#09FE00',
},
text: {
primary: '#000000',
secondary: '#FFFFFF',
},
},
}));
export default theme;
|
App.js
Javascript
import React, { Component } from 'react';
import './App.css';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/styles';
import theme from './theme';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
function App() {
return (
<React.Fragment>
<ThemeProvider theme={theme}>
<CssBaseline />
<Container maxWidth="sm">
<Typography component="h1" variant="h1" align="center"
color="textPrimary" gutterBottom>
Geeks for Geeks
</Typography>
<Typography variant="h2" align="center"
color="textSecondary">
h2 Typography with secondary text colour
</Typography>
<br />
<Typography variant="h3" align="center"
color="textPrimary" paragraph>
h3 Typography variant with primary text colour
</Typography>
<br />
<Button variant="contained"
color="primary" > Primary
</Button>
<Button variant="contained"
color="secondary"> Secondary
</Button>
{
}
<Button variant="contained"
style={{ background: theme.palette.error.main }}>
Error </Button>
<Button variant="contained"
style={{ background: theme.palette.warning.main }}>
Warning </Button>
<Button variant="contained"
style={{ background: theme.palette.info.main }}>
Info </Button>
<Button variant="contained"
style={{ background: theme.palette.success.main }}>
Success </Button>
<br /><br />
</Container>
</ThemeProvider>
</React.Fragment>
);
}
export default App;
|
Output: 
Reference: