Bootstrap 5 UI: crear un panel responsive con modo oscuro usando CSS nativo y JavaScript vanilla

Crear una interfaz de administración limpia, responsive y moderna es un requisito esencial para muchos proyectos web. Gracias a Bootstrap 5, las variables CSS nativas y la compatibilidad integrada con el modo oscuro, podemos estructurar un panel profesional sin cargar el proyecto con bibliotecas externas.

Estructura del diseño y barra lateral responsive

Un panel típico necesita una barra de navegación superior y un menú lateral plegable en pantallas pequeñas. Con las clases de utilidad de Bootstrap 5 y su sistema Flexbox, el diseño se organiza con muy pocas líneas de código:

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

Gestión del modo oscuro con JavaScript vanilla

En Bootstrap 5, el tema oscuro se controla mediante el atributo data-bs-theme del elemento raíz <html>. Podemos añadir un interruptor dinámico y guardar la preferencia del usuario en 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);
});

Conclusión

Con la evolución de Bootstrap 5 y la eliminación definitiva de la dependencia de jQuery, desarrollar interfaces rápidas y accesibles con JavaScript puro es ahora especialmente sencillo y eficiente.