VOOZH about

URL: https://www.geeksforgeeks.org/reactjs/how-to-add-theme-to-your-react-app/

⇱ How to add theme to your React App? - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

How to add theme to your React App?

Last Updated : 23 Jul, 2025

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:

👁 Image

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.

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:👁 Image


Comment