Refine Dark Mode Implementation with Custom Theme and Toggle #153
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/[email protected]/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.
|
In dark mode, the entries on the left side nav bar have light text on a light background: |
|
In light mode, we've mostly lost the "active" list item indication, as well as have gained much darker separations between list items. Before: After: |
|
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
|
Dark mode: Competition Statistics table uses dark text on dark background: |
|
Same with other tables e.g.: |
There was a problem hiding this comment.
Please reach out ([email protected]) 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 :)
2 participants
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