How to Add Transition While Switching from Light Mode to Dark Mode in JavaScript

How to Add Transition While Switching from Light Mode to Dark Mode in JavaScript

Switching between light and dark modes has become a popular feature in modern web design. It allows users to customize the appearance of a website based on their preferences and reduces eye strain in low-light environments. In this article, we will explore how to add a smooth transition effect while switching from light mode to dark mode using JavaScript.

Understanding Light Mode and Dark Mode

Before we dive into the implementation details, let's understand what light mode and dark mode mean. Light mode refers to the default appearance of a website with a white or light-colored background and dark text. On the other hand, dark mode is an alternative appearance with a dark background and light-colored text. The transition between these two modes can be made more visually appealing by adding a smooth animation.

Adding CSS Styles for Light and Dark Mode

The first step is to define the CSS styles for both light and dark modes. We can achieve this by creating two CSS classes, one for each mode. Here's an example:

    .light-mode {
      background-color: #ffffff;
      color: #000000;
      transition: background-color 0.5s ease, color 0.5s ease;
    }
    
    .dark-mode {
      background-color: #000000;
      color: #ffffff;
      transition: background-color 0.5s ease, color 0.5s ease;
    }
  

In the above code, we define the background color and text color for both light and dark modes. Additionally, we include a transition property to specify the duration and easing function for the transition effect.

Implementing the JavaScript Functionality

Now that we have our CSS styles in place, let's implement the JavaScript functionality to switch between light and dark modes. We will use JavaScript to toggle the CSS class applied to the HTML body element. Here's the code:

    function toggleMode() {
      var body = document.getElementsByTagName("body")[0];
      body.classList.toggle("dark-mode");
    }
  

In the above code, we define a function named toggleMode() that toggles the "dark-mode" class on the body element. This function can be called whenever the user wants to switch between light and dark modes.

Adding a Smooth Transition Effect

Finally, to add a smooth transition effect while switching between light and dark modes, we need to apply the CSS class dynamically with a slight delay. We can achieve this by modifying our JavaScript code as follows:

    function toggleMode() {
      var body = document.getElementsByTagName("body")[0];
      body.classList.add("dark-mode");
      
      setTimeout(function() {
        body.classList.toggle("dark-mode");
      }, 100);
    }
  

In the updated code, we first add the "dark-mode" class to the body element. Then, after a delay of 100 milliseconds, we toggle the class again. This delay allows the browser to apply the initial class change and trigger the transition effect smoothly.

Conclusion

By following the steps outlined in this article, you can easily add a transition effect while switching from light mode to dark mode in your JavaScript-powered website. Remember to define the CSS styles for both modes, implement the JavaScript functionality to toggle the class, and add a slight delay for a smoother transition.

References