More info on how Bootstrap's theme switching works can be found here: https://getbootstrap.com/docs/5.3/customize/color-modes/
This code is similar to the code provided on Bootstraps' website but is set up to work with classes instead of SVGs so you can use a font icon library.
First create a new JavaScript file with the following code. This should be separate from any bundling, if you are doing that. This is because you want to include this code high up on the DOM to prevent the screen from flashing white when it loads.
ThemeHandler Javascript
Add a script tag to the head of the page. It needs to included early on the DOM to prevent the page from flashing white if someone has defaulted to a dark theme.
Add the following to the navbar's menu. This example is using Material Design Icons, https://pictogrammers.com/library/mdi
Navbar Theme Selector HTML
<li class="nav-item dropdown">
<button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
</button>
<div class="dropdown-menu">
<button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
<button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
<button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
</div>
</li>