Bootstrap 5 UI: Realizzare una dashboard responsive e dark-mode usando solo CSS nativo e JS vanilla

Realizzare un'interfaccia amministrativa pulita, reattiva e moderna è un requisito fondamentale per molti progetti web. Grazie a Bootstrap 5 e al supporto nativo per le variabili CSS e la modalità scura (dark mode), possiamo strutturare una dashboard professionale senza appesantire il progetto con librerie esterne.

Struttura del layout e sidebar responsive

Una tipica dashboard richiede una barra di navigazione superiore e un menu laterale (sidebar) collassabile su schermi piccoli. Utilizzando le classi utility di Bootstrap 5 e il sistema a griglia flexbox, possiamo organizzare il layout con pochissime righe di codice:

<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>

Gestione del Dark Mode con JavaScript Vanilla

In Bootstrap 5, la gestione del tema scuro si basa sull'attributo data-bs-theme impostato sull'elemento radice <html>. Possiamo attivare uno switch dinamico che memorizza la preferenza dell'utente nel 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);
});

Conclusioni

Grazie all'evoluzione di Bootstrap 5 e all'abbandono definitivo di jQuery, sviluppare interfacce veloci e accessibili in JavaScript puro è diventato estremamente semplice e performante.