How to add dual theme to your React App ?

Dual Themes are very common nowadays in websites most commonly the light and dark versions and more and more apps and websites are including this feature. For React apps, the Material UI framework provides very useful functions using multiple themes, and switching between them is quite easy.

We’ll create a simple react app and switch between Dark and Light themes using a Switch component.

Creating React Application And Installing Module:

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

  npx create-react-app gfg

• Step 2: After creating your project folder i.e. gfg, 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 4: Create the following two new files in the src folder: 

  • theme.js: In this file, we’ll define our theme objects.
  • Component1.js: This is our example child component.

Project Structure: It will look like the following.

The useTheme Hook:

We can import multiple themes from our theme file and then switch themes in our parent component using a Switch component and its handler function. But a problem arises, what about its child components and further nested components?

In a single theme architecture, all components of an app can just import the theme object directly from the theme.js file and use it. Now, how would they know about the change in theme since there are dual themes? Would we have to pass down a prop notifying each component separately that ‘Hey, the active theme has changed’, That would be quite a cumbersome and inefficient way to do this.

Fortunately, Material-UI provides a hook useTheme through which we can access the parent theme variables inside our React Components. So we don’t need to import theme separately and can just use whatever theme object the parent component is using. Hence now even if we change themes it gets changed in the entire component tree.

Syntax:

import { useTheme } from '@material-ui/core/styles';

function Component1() {
  const theme = useTheme();
}

Creating the Dark theme object:

Even though Material UI comes with in-built light and dark modes we’ll define the dark theme object separately as moving ahead we can have the freedom to change every property distinctively in both themes, or you could even want a gray theme rather than a dark theme. 

const darkTheme = responsiveFontSizes(createMuiTheme({
  spacing: 4,
}));

We’ll keep the fonts and typographies of the darkTheme same as the original one. We’ll change the background to black and the palette primary/secondary colors to white as shown below.

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/, you will see the following output: