Open In App
Related Articles

How to add theme to your React App?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>
                    {/* Since, color prop only takes primary and
          secondary as values,we define other colors
          in component's style */}
                    <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

//theme.js
 
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'//green
        },
        primary: {
            main: '#2B37D4',//indigo
        },
        secondary: {
            main: '#E769A6',//pink
        },
        error: {
            main: '#D72A2A',//red
        },
        warning: {
            main: '#FC7B09',//orange
        },
        info: {
            main: '#6B7D6A',//gray
        },
        success: {
            main: '#09FE00',//green
        },
        text: {
            primary: '#000000',//black
            secondary: '#FFFFFF',//white
        },
    },
}));
 
export default theme;

                    

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

npm start

Output:




Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads