Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark theme #221

Merged
merged 7 commits into from
Oct 3, 2024
Merged

Dark theme #221

merged 7 commits into from
Oct 3, 2024

Conversation

smarr
Copy link
Owner

@smarr smarr commented Oct 3, 2024

This is inspired by #217 but relies completely on Bootstrap's theme support and does not need to define a lot of new styles.

The main changes to support dark mode are:

  • use predefined color variables and avoid hardcoding colors
  • add a theme switcher icon to the menu bar
  • images/plots are handled either by:
    • adapting the colors for JS-created plots using the uPlot library (plots don't refresh on theme change though)
    • invert colors for plots that are pre-rendered on the server using charts.js
  • use css classes that are themed (instead of light use secondary for instance)
  • use css classes for the fast/slow highlighting

Unrelated bug fix:

  • fix the expansion of commit messages on the data pages to avoid interfering with download links

@smarr
Use background color for jumbotron replacement that is light/dark-mod…
8d0ade5 
…e independent

Signed-off-by: Stefan Marr <[email protected]>
@smarr
Avoid expaning of commit messages interfering with links to data files
a1bf62a 
Signed-off-by: Stefan Marr <[email protected]>
@smarr
Add the theme switcher to all pages
8167166 
- rename `refresh` to `menu` since it’s not just the refesh button (but that’s true for a long time already)
- put the theme switcher button into a template

Signed-off-by: Stefan Marr <[email protected]>
@smarr
Use bootstrap color variables to support dark theme easily
76051e4 
Signed-off-by: Stefan Marr <[email protected]>
@smarr
Add dark mode color theming for uPlot plots
8f99b3a 
Signed-off-by: Stefan Marr <[email protected]>
@smarr
Improve dark mode on comparison page a little more
50a5896 
Signed-off-by: Stefan Marr <[email protected]>
@smarr
Invert the images on the compare page
190cb95 
This is a very simplistic solution, avoding to generate multiple images. Let’s see how people like it.

Signed-off-by: Stefan Marr <[email protected]>
@smarr smarr added the enhancement New feature or request label Oct 3, 2024
@smarr smarr mentioned this pull request Oct 3, 2024
Closed
@smarr smarr merged commit f0631af into master Oct 3, 2024
2 checks passed
@smarr smarr deleted the dark-theme branch October 3, 2024 15:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@smarr