Implement UI Dark Mode

[kjporter]

Description
Several users requested a "dark mode" for the website.

Acceptance Criteria

• Add dark mode toggle to the controller dashboard header that JS-triggers dark mode styles
• Create dark mode styles that apply to controller, training, and admin dashboard views

Accepted By:

Dev Notes

• I like how the dark mode toggle looks/works at: https://vatsim.net/docs
  
• We've decided to implement this as part of a larger upgrade of the site to bootstrap framework 5.3.x - use native support
• Merge JS & CSS files with Laravel Mix #225, CSS & JS Clean-Up #384, Migrate site to Bootstrap 4.x #385, Migrate site to bootstrap 5.3.x #386, Migrate from mix to vite #444 must be accomplished before this story (prerequisite)
• This is story 6/6 to support bootstrap modernization and dark mode

Working Branch
core/darkmode-v3

PR
#815

QA Notes

Deployment Notes

[iccowan]

We might want to look into this, because bootstrap may support a dark mode that auto-detects the user's browser preference and changes the styling based on that.

[iccowan]

Also, that website mentioned looks extremely similar to daisyUI's light/dark themes (https://daisyui.com/components/) which are supported by default so I guess possibly we could consider moving to a styling framework that supports different themes (not sure if this would be easier or not - just some ideas). DaisyUI is a component library built on top of TailwindCSS which is very nice to use, but not the easiest (I've just come to dislike bootstrap, lol).

[kjporter]

Yeah, I think you are right about TailwindCSS... not familiar with DaisyUI. I think I could replicate the same effect with JS and CSS...