Modern-css

Dynamic Theme Switcher: Building a Light & Dark Mode Toggle using CSS Variables and React

A major aspect of User Experience (UX) is ensuring that your application looks great and functions well. One aspect of creating a great user experience is implementing a light and dark mode toggle. In this tutorial, we'll show you how to create a dynamic theme switcher for your React web application using CSS variables and state management.

Benefits of Light & Dark Mode

Before we dive into the code, let's talk about why implementing a light and dark mode toggle can be beneficial for your application's UX. Light and dark modes provide a more diverse user experience while offering various features:

  • Helps to reduce eye strain and tiredness for your users over extended periods of usage
  • Enhances readability and makes important features stand out
  • Preserves your device's battery life and power usage

Taking these benefits into account, it only makes sense to implement a light and dark mode toggle on your web application. Let's get started!

Setting up the Project

Before we start with the implementation, let us set up our React application. For this tutorial, we'll be using **create-react-app**, a tool that creates an initial React project. If you don't have it installed, run the following command to install it globally: 

npm install -g create-react-app

Next, create a new React application with the following command:

npx create-react-app dynamic-theme-switcher

Once the new application is created, navigate to the project directory:

cd dynamic-theme-switcher

The project is now set up and ready to be used. Let's move on to the implementation of the dynamic theme switcher.

Implementing the Light & Dark Mode Switcher

To implement the light and dark mode toggle, we'll use CSS variables. CSS Variables allow you to easily define and manipulate values that can be used throughout your CSS. If you're not familiar with CSS Variables, take a look at this article to learn more.

First, let's define the CSS properties for our light and dark mode themes. In your `src/App.css` file, add the following CSS code :


:root {
  --primary-color: #007bff; /* Blue */
  --text-color: #212529; /* Black */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

body.light-mode {
  --bg-color: #f8f9fa; /* Light gray */
}

body.dark-mode {
  --bg-color: #343a40;  /* Dark gray */
  --text-color: #fff; /* White */
}

The `:root` selector sets the CSS custom properties (CSS Variables) for our application. We define the `primary-color` and `text-color`. We then set the `background-color` and `color` of the `body` tag to use these custom properties. Lastly, we define the `body.light-mode` and `body.dark-mode` that overrides the `--bg-color` and `--text-color`.

The `body.light-mode` and `body.dark-mode` classes will be toggled depending on the active theme of our application. Now we need to add a toggle button to switch between our light and dark themes. Let's create a new component called `ThemeSwitcher` in your `src/components/` directory: 


import React from 'react';

export default function ThemeSwitcher(props) {
  return (
    
  );
}

Our `ThemeSwitcher` component is fairly simple. We create a `label` element that houses an `input`. The `checked` property of the `input` element is set to the `isDarkMode` prop we pass to it, so the toggle button will be in the correct position based on the current mode. The `onChange` property specifies the `handleToggle` function that will handle the change of state when the button is toggled. Finally, we include a `span` element that adds some styling to our toggle button.

Now that we have our `ThemeSwitcher` component, we can add it to our `App.js` file, where we'll manage the state of our application. Add the following code to your `App.js` file: 


import React, { useState } from 'react';
import ThemeSwitcher from './components/ThemeSwitcher';
import './App.css';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  function handleToggle() {
    setIsDarkMode(!isDarkMode);
  }

  document.body.classList.remove(isDarkMode ? 'light-mode' : 'dark-mode');
  document.body.classList.add(isDarkMode ? 'dark-mode' : 'light-mode');

  return (
    <>
      
      
Welcome to Dynamic Theme Switcher Tutorial

      
 In this tutorial, you'll use the power of CSS variables and React to create a dynamic theme switcher for your web application!

      
This is an example paragraph.

    
  );
}

export default App;

In `App.js`, we create a state variable, `isDarkMode`, which indicates the current state of the application. We then create a function, `handleToggle`, that toggles this state whenever the toggle button is clicked.

We also use `document.body.classList` to toggle either the `light-mode` or `dark-mode` class from the `body` tag. This will change the background and text color of the application when we toggle the button.

We wrap our application inside a `div` tag and include our `ThemeSwitcher` component, which we pass the `isDarkMode` state and `handleToggle` function as props. Lastly, we add some sample text to see how the theme switcher works.

Conclusion

That's it! You now have a dynamic theme switcher for your React web application that utilizes CSS Variables and state management. With this implementation, your users will be able to switch between light and dark mode, improving the look and feel of your application, and providing a better user experience. Feel free to customize the colors to match your own branding.

Thanks for following along with this tutorial. If you have any questions or comments, feel free to leave them below.

#CSS#React#Light & Dark Mode#User Experience