Bootstrap 5 UI: criar um dashboard responsivo com modo escuro usando CSS nativo e JavaScript vanilla

Criar uma interface administrativa limpa, responsiva e moderna é um requisito essencial para muitos projetos web. Graças ao Bootstrap 5, às variáveis CSS nativas e ao suporte integrado ao modo escuro, podemos montar um dashboard profissional sem sobrecarregar o projeto com bibliotecas externas.

Estrutura do layout e barra lateral responsiva

Um dashboard típico precisa de uma barra de navegação superior e de um menu lateral recolhível em telas menores. Com as classes utilitárias do Bootstrap 5 e seu sistema Flexbox, o layout pode ser organizado com pouquíssimas linhas 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>

Gerenciar o modo escuro com JavaScript vanilla

No Bootstrap 5, o tema escuro é controlado pelo atributo data-bs-theme no elemento raiz <html>. Podemos adicionar um seletor dinâmico e salvar a preferência do usuário no 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);
});

Conclusão

Com a evolução do Bootstrap 5 e o abandono definitivo do jQuery, desenvolver interfaces rápidas e acessíveis em JavaScript puro tornou-se extremamente simples e eficiente.