How to add theme to your React App?

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;