Learn more about these different git repos.
Other Git URLs
Pagure is very light/bright. It'd be great if there was a dark theme that was a bit easier on the eyes...
This would include a comprehensive color shift for the masthead, body, etc., and a dark theme for the code and syntax highlighting regions.
The various components support this already, but I do not know if we've got a dark theme variant of Fedora Bootstrap to go with it...
Metadata Update from @ryanlerch: - Issue tagged with: RFE
With the new theming system, it should be quite easy to make a dark theme mode now.
One question -- is this something you want as user-configurable? I.e. different CSS is delivered for different users on the same site, with a config setting for a user? TBH, not sure about having a config variable likethis though.
Or just having a whole theme/site with a dark theme? (<_-this is a lot easier)
The idea is that this would be user-configurable, yes.
Though why couldn't we do something like pass an array of allowed themes and have a default theme setting in pagure.cfg? That way the theme selection could be user-configurable while still using the same mechanisms for themes in general.
pagure.cfg
I'll have to dig deeper, but we are currently using flask blueprints to do the themes, and it appears that these can't be changed on a per-user basis. An indidivudal theme however, could use a different CSS on a per-user basis, so that might be do-able, and will totally work for switching a dark and light theme variant for a specific theme.
That seems acceptable for the scope of this issue.
i agree, yet there is nothing for pagure on userstyles.
Metadata Update from @wombelix: - Issue set to the milestone: 6.0
As you probably know, the landscape has changed since this ticket was originally filed.
There is no need for user configuration now, IMHO; you could just automatically respect the OS' user-set color scheme preference instead; users can have their OS / DE switch between light and dark depending on the time of the day (with this in GNOME for example).
You can detect this condition using CSS rules such as:
@media (prefers-color-scheme: dark) { blah blah }
See this technical reference article on MDN for more details.
Log in to comment on this ticket.