Refine Dark Mode Implementation with Custom Theme and Toggle#153
Refine Dark Mode Implementation with Custom Theme and Toggle#153Keerthi421 wants to merge 4 commits intoUMDLARS:mainfrom
Conversation
|
|
||
| <script src="/static/js/jquery.slim.min.js"></script> | ||
| <script src="/static/js/bootstrap.bundle.min.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> |
There was a problem hiding this comment.
We have made an effort to serve all scripts we're using from the application, rather than relying on external CDNs. Depending on your preference, I'd be happy to either see this file and the font file it references added to web/web/static, or since we only use two icons here, we could just inline two static SVGs for light and dark mode to avoid having to include an entire font.
|
This isn't a requirement for this PR, but the login page still respect light/dark mode. |
|
The navbar has been made sticky and given a higher z-index, but doesn't have an opaque background so the text is visible below it. Personally, I don't think it's worth the screen real estate penalty to have the top nav sticky. (Side nav might be a different story!) Personally, I'd be lightly in favor of dropping the sticky top nav, though I could certainly be convinced otherwise! Screencast_20250521_233226.webm |
| top: 0; | ||
| z-index: 1020; | ||
| background-color: var(--bs-body-bg); | ||
| transition: background-color 0.3s ease; |
There was a problem hiding this comment.
This line makes the light/dark mode transition look a bit strange, IMO, since it's out of sync with the rest of the page on transition:
Screencast_20250521_233456.webm
ChandlerSwift
left a comment
There was a problem hiding this comment.
Please reach out (chandler@chandlerswift.com) and let me know if you'd like a hand getting this set up for local testing! I'll concede it's not particularly straightforward :)








This PR improves the dark mode implementation by replacing the prebuilt cyborg theme with a custom dark theme and adding user controls. Key changes include:
The changes address the issues mentioned in #110 regarding contrast problems, readability issues, and the need for a custom theme. The implementation now provides a more polished and user-friendly dark mode experience while maintaining consistency with Bootstrap 5's design system.
closes #110