How to add dark mode in react js app with MUI toggle/switch | Material UI Design

If you are building a React.js app with Material UI Design, you may want to add a Dark Mode option for your users. Dark Mode is becoming more and more popular as users look for ways to reduce eye strain and save battery life. In this article, we will show you how to add a Dark Mode toggle/switch using Material UI Design in your React.js app.

Setting up Material UI

Before we can add a Dark Mode toggle/switch, we need to set up Material UI in our React app. You can do this by following the documentation on the Material UI website. Once you have Material UI installed and set up, we can move on to adding the Dark Mode toggle/switch.

Adding Dark Mode toggle/switch

To add a Dark Mode toggle/switch, we will use the Switch component provided by Material UI. The Switch component is a toggle input that can be used to turn something on or off. We will use this component to create our Dark Mode toggle/switch.

First, we will need to create a state in our React component to keep track of whether Dark Mode is enabled or not. We can do this using the useState hook provided by React.

    
    import React, {useState} from 'react';
    import Switch from '@mui/material/Switch';

    const DarkModeToggle = () => {
        const [darkMode, setDarkMode] = useState(false);

        const handleDarkModeToggle = () => {
            setDarkMode(!darkMode);
        }

        return (
            

                
            
        )
    }

    export default DarkModeToggle;
    
    

In the code above, we have created a DarkModeToggle component that contains a Switch component. We have also created a state variable called darkMode and a function called handleDarkModeToggle that will toggle the darkMode state when the Switch is clicked.

Applying Dark Mode styles

Finally, we can apply the Dark Mode styles to our app based on the darkMode state. We can do this by adding a class to the root element of our app based on the value of the darkMode state. We can use the className prop to conditionally apply the class based on the darkMode state.

    
    import React from 'react';
    import DarkModeToggle from './DarkModeToggle';
    import './App.css';

    const App = () => {
        return (
            

                
                {/* other app content */}
            
        )
    }

    export default App;
    
    

In the code above, we have added a class to the root element of our app based on the darkMode state. We have also imported the DarkModeToggle component and added it to our app. Now, when the darkMode state is true, the ‘dark-mode’ class will be applied to the root element and the Dark Mode styles will be applied.

Conclusion

Adding a Dark Mode toggle/switch to your React.js app with Material UI Design is a great way to provide a better user experience for your users. With just a few lines of code, you can give your users the option to switch between light and dark themes, making your app more accessible and user-friendly.