Open In App
Related Articles

How to create Dark Mode in ReactJS using Material UI ?

Like Article
Save Article
Report issue

Over the past few years, dark mode has gained widespread popularity as a feature in various applications and websites. It provides a visually pleasing and more comfortable viewing experience, particularly in low-light environments. If you’re using ReactJS and Material UI, incorporating dark mode functionality into your web application is a straightforward process.


Steps 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

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",

Explanation: Material-UI comes with two palette types; light (the default) and dark. You can make the theme dark by setting the type: ‘dark’.


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 alt="Nikita Chaudhari"
                            src={myImg} />
                        <IconButton aria-label="settings">
                            <MoreVertIcon />
                    title="Nikita Pradip Chaudhari"
                    title="Paella dish"
                    <Typography variant="body2"
                        Geeks For Geeks : Dark Mode
                <CardActions disableSpacing>
                        aria-label="add to favorites">
                        <FavoriteIcon />
                    <IconButton aria-label="share">
                        <ShareIcon />
                    {/* switching between dark and light mode */}


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

npm start

Output: Now open your browser and go to http://localhost:3000

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