Bootstrap 5 UI : créer un tableau de bord responsive avec mode sombre en CSS natif et JavaScript vanilla

Créer une interface d'administration claire, responsive et moderne est essentiel dans de nombreux projets web. Grâce à Bootstrap 5, aux variables CSS natives et à la prise en charge intégrée du mode sombre, il est possible de réaliser un tableau de bord professionnel sans alourdir le projet avec des bibliothèques externes.

Structure de la mise en page et barre latérale responsive

Un tableau de bord classique nécessite une barre de navigation supérieure et un menu latéral escamotable sur les petits écrans. Les classes utilitaires de Bootstrap 5 et son système Flexbox permettent d'organiser la mise en page avec très peu de code :

Gérer le mode sombre avec JavaScript vanilla

Dans Bootstrap 5, le thème sombre repose sur l'attribut data-bs-theme appliqué à l'élément racine . Un interrupteur dynamique peut mémoriser la préférence de l'utilisateur dans 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

Grâce à l'évolution de Bootstrap 5 et à l'abandon définitif de jQuery, développer des interfaces rapides et accessibles en JavaScript pur est devenu particulièrement simple et performant.