Introduce theming per user and instance

[hellcp]

Is your feature request related to a problem? Please describe.

I heard @simotek complaining about lack of dark theme option in OBS. At the same time @Conan-Kudo would like to be able to use company theme / project theme for instances of OBS. It would be nice to provide users with option to switch between themes that are available on the instance, but also allow instance admins to set default theme

Describe the solution you'd like

Previously it was done with bratwurst, which wasn't a neat solution. However to properly setup theming both stylesheets, layouts and some icons have to be replacable. I would suggest creating a directory where themes would reside (like /src/api/app/themes?) with directories:

• theme name
  • assets
    • stylesheets
    • images
  • views
    • layouts

(layouts because the most important part of theming will probably be header and footer, although would still be nice if other stuff was expandable, so for example replacing elements in views/packages to include more links in show, for it to better integrate with infrastructure of instance owners)

In addition, this would be a nice way to make webui3 and beyond, because we wouldn't be relying on adding switch_to_webui2 to every view we want to switch, instead opting for existing solution (will also be useful when updating bootstrap 4 to bootstrap 5 etc.)

Describe alternatives you've considered

Make people switch themes by overriding existing code and files (that only works with instance based theming though).

Additional context

Example of quite well executed theming in similar platform would have to go to pagure, although one of differences I would like to see there would be including scss compiling, because we might want to have some of our bootstrap usage expanded:
https://pagure.io/pagure/blob/master/f/pagure/themes

[hennevogel]

Themeing that requires code changes doesn't really make sense IMHO. If you can do this, you can do this already right now, as Ruby on Rails allows for this to easily happen. We already do it currently with the bootstrap beta feature and it's a no-brainer.

What I would find more interesting is a way to overwrite some of the sass variables (and maybe even introduce more narrow scopes for them) so you can influence the colors from inside the app.

[hellcp]

@hennevogel you have to consider how other projects already have themes of their own, where not just variables are used. Heck, even we do with chameleon.

What I would really want is for themes to be drag and drop into a single directory, without overriding what's already in code.

[Conan-Kudo]

So there are two main use-cases I see here:

• Having a corporate theme instance wide: This, I imagine is easy for OBS to support now.
• Having a per-user setting for swapping to something like a dark theme or high contrast theme (for vision issues)

[guoyunhe]

@hennevogel may I ask how did you provide beta Bootstrap theme along with the old one? Like doing some if/else condition in page templates?

[hennevogel]

It's basically it's own layout, view and assets path. It's still there see src/api/app/controllers/webui/webui_controller.rb#L309-L339

But this is not what we want to have in our code base for themes.

[bluca]

Any update on this? Would love a dark theme

[ahjolinna]

yeah it would be nice to see some progress on this issue (my eyes 😭)