Dark Mode

Bootstrap 5.3 supports color modes, starting with dark mode. You can implement your own color mode toggler onto a static menu bar and apply the different color modes as you see fit. Bootstrap supports a light mode (default) and now dark mode. Color modes can be toggled globally on the <html> element, or on specific components and elements, thanks to the @data-bs-theme attribute.

Example

To add a color mode toggler to the menu bar, add a series of <button> elements with the attributes @data-bs-theme="light" or @data-bs-theme="dark" as shown here.

<ul class="navbar-nav ms-auto">
  <li class="nav-item dropdown">
    <a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center show"
      id="bd-color-mode" data-bs-toggle="dropdown" aria-expanded="false"
      data-bs-display="static">Toggle theme</a>
    <ul class="dropdown-menu dropdown-menu-end"
      aria-labelledby="bd-color-mode" style="--bs-dropdown-min-width: 6rem;"
      data-bs-popper="static">
      <li>
        <button type="button" class="dropdown-item d-flex align-items-center"
          data-bs-theme-value="light"> Light
        </button>
      </li>
      <li>
        <button type="button" class="dropdown-item d-flex align-items-center"
          data-bs-theme-value="dark"> Dark
        </button>
      </li>
      <li>
        <button type="button" class="dropdown-item d-flex align-items-center"
          data-bs-theme-value="auto"> Auto
        </button>
      </li>
    </ul>
  </li>
</ul>

The plug-in includes a sample color mode toggler in its header navbar.