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, lets have a look at demo of what we are talking about. This will clear your expectations and will help you make decision whether you want spend your valuable time reading this article or now.
In above screenplay, you can see a Toggle button (Flex Switch) and when we click, the Theme of website changes between light and dark mode.
If you are happy with what you saw above and want to implement this in your project, lets continue here. I have done this particular demo in ASP.NET Core 8 MVC Project but believe me, its just CSS and JavaScript, so it should work on any platform.
Adding Switch to Navbar
We will be targeting the nav element inside header. I have added following code in new div just after navbar div so I can align the switcher to right side.
<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 in the right side of Navbar. You can refer to documentation and sample code in Bootstrap documentation website.
Before moving to adding functionality, we need to add one more attribute to the our HTML tag.
Assigning Default Theme
In HTML tag at the very beginning of our HTML file, we can add data-bs-theme attribute to HTML tag.
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>Adding Functionality to Switch – Change Bootstrap 5 Theme
Now its time for JavaScript to come into picture. JavaScript is build 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 method to get and change values of data-bs-theme attribute.
Using Event Listener method instead of Function
Another approach can be without using a function. This can be done using Event Listener.
<script type="text/javascript">
//Change bootstrap 5 theme on EventListner - Using this method, no need to refer to click event in function.
document.getElementById('btnSwitch').addEventListener('click', () => {
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
document.documentElement.setAttribute('data-bs-theme', 'dark')
}
else
document.documentElement.setAttribute('data-bs-theme', 'light')
})
</script>In this case, we can omit the onClick method from HTML code and do the same task by adding a event Listener on click event. If we examine the first line here.
document.getElementById('btnSwitch').addEventListener('click',...- We first get the element using the ID defined, ID was
btnSwitch. - Then added an Event Listener and event we listened was Click.
- Once we are able to listen to the click event, then we repeated the same steps as in first method.
- We used
getAttributeandsetAttributemethod to find and switch between themes.
That was it, we are able to perform what we needed. In this article, we learned how we can change bootstrap 5 theme dynamically on button click event.
Thank you for reading and if you find the content useful, please subscribe to our mailing list and to watch such technical content in audio-visual format in Hindi language, subscribe to PRB Hindi on YouTube.
