Implement UI Dark Mode - Githubissues

kjporter commented 1 year ago

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
225, #384, #385, #386, #444 must be accomplished before this story (prerequisite)
This is story 6/6 to support bootstrap modernization and dark mode

Working Branch

PR

QA Notes

Deployment Notes

iccowan commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

ZTL-ARTCC / Current_Website

Implement UI Dark Mode #201

225, #384, #385, #386, #444 must be accomplished before this story (prerequisite)