Bootstrap 5 UI: Responsives Dashboard mit Dark Mode nur mit nativem CSS und Vanilla JS erstellen

Eine übersichtliche, responsive und moderne Administrationsoberfläche ist für viele Webprojekte unverzichtbar. Mit Bootstrap 5, nativen CSS-Variablen und der integrierten Unterstützung für den Dark Mode lässt sich ein professionelles Dashboard ohne zusätzliche, umfangreiche Bibliotheken aufbauen.

Layout-Struktur und responsive Seitenleiste

Ein typisches Dashboard benötigt eine obere Navigationsleiste und ein auf kleinen Bildschirmen einklappbares Seitenmenü. Mit den Utility-Klassen von Bootstrap 5 und dem Flexbox-Rastersystem kann das Layout mit nur wenigen Codezeilen organisiert werden:

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

Dark Mode mit Vanilla JavaScript verwalten

In Bootstrap 5 wird das dunkle Farbschema über das Attribut data-bs-theme am Wurzelelement <html> gesteuert. Ein dynamischer Schalter kann die Auswahl des Benutzers in localStorage speichern:

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);
});

Fazit

Durch die Weiterentwicklung von Bootstrap 5 und den endgültigen Verzicht auf jQuery lassen sich schnelle und barrierearme Oberflächen mit reinem JavaScript besonders einfach und effizient entwickeln.