Post
Ask Question

Switch Theme Between Light and Dark Mode on Webpage Using Bootstrap

In this article, we will learn how to add Dark and Light Mode switching functionality provided by Bootstrap 5 in our default MVC Project in Visual Studio.

How to Change Bootstrap 5 Theme between light and dark mode?

Before moving ahead, let's have a look at the demo of what we are talking about. This will clear your expectations and will help you make a decision whether you want to spend your valuable time reading this article or now.

Change Bootstrap 5 Theme

In the above screenplay, you can see a Toggle button (Flex Switch) and when we click, the Theme of the website changes between light and dark mode.

If you are happy with what you saw above and want to implement this in your project, let's continue here. I have done this particular demo in ASP.NET Core 8 MVC Project but believe me, it's just CSS and JavaScript, so it should work on any platform.

Adding Checkbox (Switch) to Navbar

We will be targeting the nav element inside the header. I have added the following code in the new div just after the navbar div so I can align the switcher to the right side.

Adding Checkbox

<div class="p-2 rounded">
    <div class="form-check form-switch" id="btnSwitch" onclick="changeTheme()">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">
            <i class="bi bi-brightness-high"></i> Theme
        </label>
    </div>
</div>

This will add a switcher in the header on the right side of the Navbar. You can refer to documentation and sample code in Bootstrap documentation.

Before moving to add functionality, we need to add one more attribute to our HTML tag.

Assigning Default Theme

In the HTML tag at the very beginning of our HTML file, we can add a data-bs-theme attribute to the HTML tag.

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>

Adding Functionality to Switch – Change Bootstrap 5 Theme

Now it's time for JavaScript to come into the picture. JavaScript is built to give dynamic functionality to web pages. There can be multiple approaches to do the same task.

Using Function on Click event

As we have assigned a function named changeTheme() in div, we will first see the classic JavaScript method.

<script type="text/javascript">
    // Change Bootstrap 5 theme on ClickEvent. It will need a call to function on onclick event
    
    function changeTheme() {
        if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
            document.documentElement.setAttribute('data-bs-theme', 'dark');
        } else {
            document.documentElement.setAttribute('data-bs-theme', 'light');
        }
    }
</script>

We are using documentElement here and then setAttribute and getAttribute methods to get and change values of the data-bs-theme attribute.

There can be another approach to get this done. That is using Event Handlers.

In JavaScript, an event handler is a function that gets executed in response to a specific event occurring on a web page. These events can be user interactions like clicking a button, hovering over an element, or submitting a form, as well as browser events like page loading or resizing.

I have written this article on my blog https://dotnet.guide as well, using the second method, and explained the usage of code lines. In general, we do not need to call a function and instead, we can add a listener to our webpage to identify whenever a particular element is clicked and then perform the above action as in the JavaScript snippet.


Similar Articles