<div class="bsuser-stage" id="bsuserStage">
  <div class="dropdown">
    <button class="btn d-flex align-items-center gap-2 bsuser-trigger" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="bsuser-avatar">DR</span>
      <span class="d-none d-sm-inline small fw-semibold">Dana Reyes</span>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
    <ul class="dropdown-menu dropdown-menu-end bsuser-menu">
      <li class="px-3 py-2 border-bottom">
        <div class="small fw-semibold">Dana Reyes</div>
        <div class="small text-muted">dana@fenwick.com</div>
      </li>
      <li><a class="dropdown-item" href="javascript:void(0)">Profile</a></li>
      <li><a class="dropdown-item" href="javascript:void(0)">Billing</a></li>
      <li><a class="dropdown-item" href="javascript:void(0)">Settings</a></li>
      <li>
        <div class="dropdown-item d-flex justify-content-between align-items-center">
          <span>Dark mode</span>
          <div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="bsuserTheme"></div>
        </div>
      </li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item text-danger" href="javascript:void(0)">Sign out</a></li>
    </ul>
  </div>
</div>

.bsuser-stage { min-height: 100vh; padding: 24px; background: #f6f7f9; transition: background .2s, color .2s; }
.bsuser-stage.bsuser-dark { background: #111827; color: #e5e7eb; }
.bsuser-trigger { border: 1px solid #e5e7eb; background: #fff; }
.bsuser-avatar { width: 26px; height: 26px; border-radius: 50%; background: #111827; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.bsuser-menu { width: 220px; }
.bsuser-menu .form-switch .form-check-input { cursor: pointer; }

const themeToggle = document.getElementById('bsuserTheme');
const stage = document.getElementById('bsuserStage');

// Clicking the switch itself would normally also bubble up and close the
// Bootstrap dropdown (any click inside a dropdown-item closes it by
// default) — stop that specific propagation so toggling doesn't dismiss
// the menu, matching how a settings toggle should behave.
themeToggle.addEventListener('click', e => e.stopPropagation());

themeToggle.addEventListener('change', () => {
  stage.classList.toggle('bsuser-dark', themeToggle.checked);
});