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

Feature request: Dark theme #586

Closed
ghost opened this issue Mar 18, 2022 · 5 comments
Closed

Feature request: Dark theme #586

ghost opened this issue Mar 18, 2022 · 5 comments
Labels
help-wanted

Comments

@ghost
Copy link

ghost commented Mar 18, 2022

It would be great to view the dashboard in dark colours, especially that dark theme is now a common consideration in UI design. This also helps in accessibility, which is a high priority feature for Goatcounter after all, as it would be less strenuous to the eyes when viewing at night.
@arp242
Copy link
Owner

arp242 commented Mar 18, 2022

All colours need to be moved to CSS variables, and then we can have "themes" with different colours sets. We could even allow people to set their own themes if we wanted to.

It's not very hard, but some work. Not very likely I'll work on this in the short term, but I'll happily accept patches.

arp242 added a commit that referenced this issue Oct 23, 2022
@arp242
Convert many things to CSS variables; initial work on dark mode
cc95566 
Ref: #586
@arp242
Copy link
Owner

arp242 commented Oct 23, 2022

I made a "dark mode", sort of. I did all the technical parts and started designing a dark mode, but I don't use dark mode myself and find any dark mode quite hard to read, so it always looks "bad" to my eyes. I very quickly discovered I have no idea what I'm doing here; many common colour choices don't really work very well with dark mode.

For example, links have been blue since forever on the web, but that's hard to read so what do you do in dark mode? What's the standard colour there? Info boxes are light blue, but that doesn't really work either. Selected search results are highlighted in yellow, but "dark yellow" doesn't really exist. Then there's the purple charts, but they don't translate to dark mode at all either. etc. etc.

So what I did make is an "approximate dark mode": I put in the technical work, and choose some colours that "kind of looks like dark mode" without spending too much time fussing over it, and I need help actually choosing reasonable colours.

The variables are all in public/dark.css with a bunch of comments. To make it a bit easier for people to work on it you can enable it on goatcounter.com by adding the force-dark class to the <html> tag ($('html').addClass('force-dark');); you'll need to do that after every page load. You can send a PR or just a list of colours to use.

I don't have any real opinions here, so just do whatever you think looks good. The only opinion I have is that the contrast should be reasonably clear (i.e. no grey text on a black background).

Also remember this takes effect on www.goatcounter.com, www.goatcounter.com/help, and the signup page too. We don't really need to do that, but it shares most CSS with the backend, so not that hard to add.

@salim-b
Copy link

salim-b commented Nov 9, 2022

Glad to hear about progress on this. My 5 cents (as a regular user):

The current state of the new dark theme..

..vs. the default result given by the Dark Reader web extension transforming the default light theme:

What immediately catched my eye regarding the new "colours that 'kind of look like dark mode'":

  • bar chart color (#ebb7ef) is too bright.
  • table row-striping contrast is too high

But I'm really no expert, too. Two ressources on the subject I think are noteworthy:

@bennypowers bennypowers mentioned this issue Jan 17, 2023
Closed
@saikadaramakaisosjupita
Copy link

I design my dark modes around the suggestions by dark reader extension. Currently, it is unable to darken the charts, but its suggestions can form a good starting point for designing a dark mode as shown in the screenshots above.

@arp242 arp242 mentioned this issue Apr 7, 2024
Closed
@arp242
Copy link
Owner

arp242 commented Apr 8, 2024

Fixed via #733

@arp242 arp242 closed this as completed Apr 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help-wanted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Enable dark theme for users that prefer it bennypowers/goatcounter
3 participants
@arp242 @salim-b @saikadaramakaisosjupita