Bootstrap 5 UI: Build a Responsive Dashboard with Dark Mode Using Native CSS and Vanilla JS

Building a clean, responsive and modern administration interface is a core requirement for many web projects. Thanks to Bootstrap 5, native CSS variables and built-in dark-mode support, we can create a professional dashboard without burdening the project with external libraries.

Layout structure and responsive sidebar

A typical dashboard needs a top navigation bar and a collapsible side menu on smaller screens. Using Bootstrap 5 utility classes and its Flexbox grid system, the layout can be organized with very little code:

<div class="d-flex" id="wrapper">
  <!-- Sidebar -->
  <div class="border-end bg-body-tertiary" id="sidebar-wrapper">
    <div class="sidebar-heading border-bottom fw-bold p-3">Athesis Admin</div>
    <div class="list-group list-group-flush">
      <a class="list-group-item list-group-item-action p-3 active" href="#!">Dashboard</a>
      <a class="list-group-item list-group-item-action p-3" href="#!">Articoli</a>
      <a class="list-group-item list-group-item-action p-3" href="#!">Impostazioni</a>
    </div>
  </div>
</div>

Managing dark mode with vanilla JavaScript

In Bootstrap 5, dark mode is controlled by the data-bs-theme attribute on the root <html> element. We can add a dynamic switch and store the user's preference in localStorage:

const toggleThemeBtn = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'light';

document.documentElement.setAttribute('data-bs-theme', currentTheme);

toggleThemeBtn.addEventListener('click', () => {
  const theme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-bs-theme', theme);
  localStorage.setItem('theme', theme);
});

Conclusion

With the evolution of Bootstrap 5 and the final removal of the jQuery dependency, building fast and accessible interfaces in plain JavaScript has become extremely straightforward and efficient.