How to add theme to your React App?
Last Updated :
04 Dec, 2023
Themes play a crucial role in web applications, ensuring a cohesive visual identity. They serve to regulate and define various aspects such as color schemes, backgrounds, font properties, shadow levels, opacity, and more, thereby maintaining a consistent and harmonized aesthetic throughout the application.
Prerequisites:
Steps to create 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”>
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@material-ui/core": "^4.12.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Theming in Material-UI:
- ThemeProvider Usage:
- Material UI provides a
ThemeProvider
component for injecting a theme into the application.
- Create Theme Object:
- Begin by defining a theme object using
createMuiTheme()
.
- ThemeProvider Integration:
- Pass the created theme object to the
ThemeProvider
component. This component wraps the entire template that needs to be themed.
- Context Feature Utilization:
<ThemeProvider>
utilizes React’s context feature to propagate the theme to all components within the template.
- Default Styling:
- Components inherit default styling properties from the theme. For example, an app bar’s background color defaults to the primary color specified in the theme.
- Customization Possibilities:
- Override or modify component colors and styles as needed. This can be achieved by explicitly setting values for individual components or by introducing another nested
<ThemeProvider>
with a different theme around the specific section requiring customization.
Defining a theme object:
The responsiveFontSizes() function enables us to have viewport responsive text sizes.
import { createMuiTheme, responsiveFontSizes }
from '@materialui/core/styles';
const theme = responsiveFontSizes(createMuiTheme({
}));
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:Â Below is the code example of the adding the theme to react app.
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;
|
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;
|
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...