Skip to content
Related Articles
Open in App
Not now

Related Articles

How to create Dark Mode in ReactJS using Material UI ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 19 Jul, 2021
Improve Article
Save Article

Having a dark mode on your website or application has become very popular nowadays. In this article, you will learn how to add a dark mode switch in your React web app to toggle between light and dark mode.

Step for Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. folder name, move to it using the following command:

    cd foldername

  • Step 3: After creating the React.js application, install the material-UI modules using the following command.

    npm install @material-ui/core
    npm install @material-ui/icons

Example: After creating a basic to react app, we will make changes in App. js as follows :

Step 1: Import ThemeProvider and createMuiTheme

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

Step 2: Set up the toggle logic in App.js

const [toggleDark, settoggleDark] = useState(false);
const myTheme=createMuiTheme({

    // Theme settings
      type: toggleDark ? 'dark' : 'light',

Step 3: Here I am creating a new SmallComponent which will be our new component imported in App. j (You can customize it to your own component. Here I am focusing on implementing dark mode in already existing code). Pass the states for dark mode (toggle dark and settoggleDark), which will be used to switch between light and dark mode. Wrap up your component inside the ThemeProvider and pass your customized theme.

<ThemeProvider theme={myTheme}>
    <SmallComponent toggleDark={toggleDark} settoggleDark={settoggleDark}/>

Step 4: Trigger toggle using onChange Switch in SmallComponent.js

const handleModeChange = () => {




import React, { useState } from "react";
import SmallComponent from "./SmallComponent";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
function App() {
  const [toggleDark, settoggleDark] = useState(false);
  const myTheme = createMuiTheme({
    // Theme settings
    palette: {
      type: toggleDark ? "dark" : "light",
  return (
    // Wrapping code in ThemeProvider
    <ThemeProvider theme={myTheme}>
      <SmallComponent toggleDark={toggleDark}
      settoggleDark={settoggleDark} />
export default App;


import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import { red } from "@material-ui/core/colors";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import Grid from "@material-ui/core/Grid";
import MoreVertIcon from "@material-ui/icons/MoreVert";
// Import your profile image in images folder
import myImg from "./images/nikita-img.jpeg";
// Import your background image in images folder
import backImg2 from "./images/nik2.jpg"
import Switch from "@material-ui/core/Switch";
const useStyles = makeStyles((theme) => ({
  // Styling material components
  root: {
    width: "100%",
    height: "100vh",
    backgroundColor: theme.palette.background.default,
    [theme.breakpoints.down("xs")]: {
      paddingTop: theme.spacing(2),
  media: {
    height: 56,
    paddingTop: "56.25%", // 16:9
  avatar: {
    backgroundColor: red[500],
export default function SmallComponent({ 
        toggleDark, settoggleDark }) {
  const classes = useStyles();
  // Trigger toggle using onChange Switch
  const handleModeChange = () => {
  return (
      <Card elevation={8}>
        {/* you can modify the image avatar,
         background and title name to yours*/}
          avatar={<Avatar alt="Nikita Chaudhari" src={myImg} />}
            <IconButton aria-label="settings">
              <MoreVertIcon />
          title="Nikita Pradip Chaudhari"
          title="Paella dish"
          <Typography variant="body2" color="textSecondary" component="p">
            Geeks For Geeks : Dark Mode
        <CardActions disableSpacing>
          <IconButton aria-label="add to favorites">
            <FavoriteIcon />
          <IconButton aria-label="share">
            <ShareIcon />
          {/* switching between dark and light mode */}

See the demo video below: 

Explanation: Material-UI comes with two palette types; light (the default) and dark. You can make the theme dark by setting the type: ‘dark’. If you want more control of the color scheme, you can define them yourself, or you can visit on Material-UI’s website to choose your desired color scheme. 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!