How to add theme to your React App? - GeeksforGeeks

12 Mar, 2021
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 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 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-ui modules using the following command.npm install @material-ui/core
Step 3: After creating the ReactJS application, Install the material-ui modules 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">
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
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,
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',
    },
  },
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',
    },
  },
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
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;
App.js
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;
Output:
Reference:
https://material-ui.com/customization/typography/
https://material-ui.com/customization/palette/
React-Questions
ReactJS-Basics
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript