Building Light and Dark Mode Themes in React with Material-UI

Introduction:

In today's digital world, offering users the flexibility to switch between light and dark modes has become a standard practice in web development. React, coupled with Material-UI, provides a powerful combination for creating beautiful and customizable user interfaces. In this article, we'll explore how to implement light and dark mode themes in React using Material-UI, allowing users to personalize their experience and enhancing accessibility.

Table of Contents:

1. Setting Up a React Project with Material-UI

2. Creating a Theme Provider

3. Defining Light and Dark Themes

4. Toggling Between Light and Dark Modes

5. Applying the Theme to Components

6. Enhancing User Experience with Media Queries

7. Conclusion

Setting Up a React Project with Material-UI:

Before we dive into creating light and dark mode themes, let's set up a React project with Material-UI. Assuming you have Node.js and npm installed, you can start by creating a new React project using Create React App:

npx create-react-app my-app
cd my-app

Next, install Material-UI by running:

npm install @mui/material @emotion/react @emotion/styled

Now we're ready to start building our light and dark mode themes!

Creating a Theme Provider:

In Material-UI, themes are managed using the ThemeProvider component. We'll wrap our entire application with this component to ensure the theme is accessible throughout the component tree. Create a new file called ThemeProvider.jsx and add the following code:

import React from 'react';
import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material';

const ThemeProvider = ({ children, themeType }) => {
  const theme = createTheme({
    palette: {
      mode: themeType,
    },
  });

  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
};

export default ThemeProvider;

Defining Light and Dark Themes:

To create light and dark themes, we'll utilize the createTheme function provided by Material-UI. Inside the ThemeProvider component, we'll define the theme based on the themeType prop passed to it. The themeType will determine whether it's a light or dark theme. Customize the theme further by modifying the palette object, adjusting colors, typography, and other properties as needed.

Toggling Between Light and Dark Modes:

To allow users to switch between light and dark modes, we need to implement a mechanism to toggle the theme. This can be achieved through a simple button or a switch component. Create a new file called ToggleThemeButton.jsx and add the following code:

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

const ToggleThemeButton = ({ toggleTheme }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const handleToggle = () => {
    setIsDarkMode(!isDarkMode);
    toggleTheme(!isDarkMode ? 'dark' : 'light');
  };

  return (
    <Button variant="contained" color="primary" onClick={handleToggle}>
      Toggle Theme
    </Button>
  );
};

export default ToggleThemeButton;

The ToggleThemeButton component keeps track of the current mode using the useState hook. When the button is clicked, it toggles the mode and calls the toggleTheme function, passing the updated mode as an argument.

Applying the Theme to Components:

Now that we have our theme and a way to toggle it, let's apply the theme to our components. Wrap your root component in the ThemeProvider component and provide the theme type and toggle function as props. For example:

import React, { useState } from 'react';
import ThemeProvider from './ThemeProvider';
import ToggleThemeButton from './ToggleThemeButton';

const App = () => {
  const [themeType, setThemeType] = useState('light');

  const toggleTheme = (type) => {
    setThemeType(type);
  };

  return (
    <ThemeProvider themeType={themeType}><ToggleThemeButton toggleTheme={toggleTheme} />
      {/* Rest of your application */}
    </ThemeProvider>
  );
};

export default App;

By passing the themeType and toggleTheme function as props, all child components can access and apply the correct theme.

Enhancing User Experience with Media Queries:

To automatically switch between light and dark themes based on the user's system preference or specific screen size, we can use CSS media queries. Material-UI provides the useMediaQuery hook for this purpose. Import it into your ThemeProvider component and modify the theme creation as follows:

import { useMediaQuery } from '@mui/material';

const ThemeProvider = ({ children, themeType }) => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const isSmallScreen = useMediaQuery('(max-width: 600px)');

  const theme = createTheme({
    palette: {
      mode: themeType || (prefersDarkMode ? 'dark' : 'light'),
    },
    // Additional theme configuration
  });

  // Rest of the component
};

The useMediaQuery hook allows us to conditionally apply the dark mode based on the user's system preferences or the screen size. Feel free to adjust the media queries and theme properties to suit your specific requirements.

Conclusion:

In this tutorial, we explored how to create light and dark mode themes in React using Material-UI. By setting up a ThemeProvider and defining the light and dark themes, we provided users with the ability to personalize their UI experience. We also learned how to toggle between themes and enhance the user experience by incorporating media queries.

Remember, offering light and dark mode themes is not only aesthetically pleasing but also enhances accessibility and user satisfaction. So go ahead and implement these features in your React application, and let your users choose the mode that suits them best!