How Use Toggle Dark and Light Mode in Bootstrap 5.3

In this section, we’ll see how to implement a dark and light mode toggle switch using Bootstrap 5.3. Bootstrap 5.3 introduces built-in support for dark mode, and we’ll see how to use it.

Enabling dark mode in Bootstrap 5.3 is as simple as adding the data-bs-theme=”dark” attribute to the <html> element in your HTML page. This will apply the dark mode theme to all Bootstrap components and elements on the page, except for those with a specific data-bs-theme attribute defined.

Enable Dark Mode

HTML

<!doctype html>
<html lang="en" data-bs-theme="dark">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5.3v dark mode</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 </head>
 <body>
  <h1>How to Use a Dark Mode Toggle Switch in Bootstrap 5.3</h1>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </body>
</html>

Build a dark mode toggle switch using Bootstrap 5.3 and minimal JavaScript.

HTML

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="darkModeToggle">
  <label class="form-check-label" for="darkModeToggle">Dark Mode</label>
</div>

JavaScript code.

<script>
  // JavaScript to toggle dark mode
  document.getElementById('darkModeToggle').addEventListener('change', function(event){
    if(event.target.checked){
      document.documentElement.setAttribute('data-bs-theme', 'dark');
    } else {
      document.documentElement.removeAttribute('data-bs-theme');
    }
  });
</script>

Toggle between sun and moon icons in Bootstrap 5.3v

To create a toggle between the sun and moon icons, you’ll also need to include the Bootstrap icon library.

Add Bootstrap 5 Icon CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<div class="dark-mode-toggle">
  <i id="darkModeIcon" class="bi bi-moon"></i> 
</div>

JavaScript code.

<script>
  document.getElementById('darkModeIcon').addEventListener('click', function () {
    this.classList.toggle('bi-moon');
    this.classList.toggle('bi-sun');
    let theme = document.documentElement.getAttribute('data-bs-theme');
    if (theme === 'dark') {
      document.documentElement.removeAttribute('data-bs-theme');
    } else {
      document.documentElement.setAttribute('data-bs-theme', 'dark');
    }
  });
</script>

Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,