Add support for bootstrap dark mode

[abe-101]

Description

Bootstrap 5.3 now supports a dark mode out of the box
https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode

in the docs they provide example js that can be used to toggle btw light and dark mode: https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript

I propose adding this to the template
steps that need to be taking:

• add data-bs-theme="light" to base template
• add theme-toggler.js to static/js/ with this js code
• Source it in the base template
• add toggle buttons to the nav menu

I would argue that we should just add this but one could argue it should be added as a feature flag, what are your thoughts?

[browniebroke]

Sure, why not. I don't think it's worth the complexity of adding it as a template option and agree that "we should just add this" 👍🏻

[abe-101]

Great
A couple of questions:

1. we need to upgrade to bootstrap 5.3, should that be a seporate PR or can include it here?
2. We don't ship with bootstrap icon, should we? or should the theme toggler be a text dropdown in the nav bar?
   3.For the drop down menu to work - we need to include the bundled version of bootstrap that includes popper.js

heres a screenshot where i'm using bootstrap icons and the bundled version

[abe-101]

I wonder if we should store the user's theme preference (light/dark) in the session and pass it to the template on all page loads. This would let us set the correct theme immediately rather than relying on JS to change it after the page loads.
Right now there's a noticeable flash effect - the page loads with data-bs-theme="light" and then JS switches it to dark mode. Storing the preference server-side would eliminate this flash since we'd render the template with the correct theme from the start.

I'm speculating and need to confirm my assumption is correct