Add custom css feature for the WebUi

[n-peugnet]

I came across this qBitTorrent WebUi theme but didn't really like the proposed way to install it. So instead I added a "Custom Css" feature for the WebUi.

Custom css can now be added to the WebUi using 2 new options in the preferences.
It is based on the "translation" feature already present in the WebUi. I am not sure if this is the best way to obtain this result but it probably is the easiest.

[FranciscoPombal]

ping @jagannatharjun @Piccirello

[Piccirello]

Hmm, this is an interesting feature. I suspect some team members will be opposed to introducing such functionality into a BitTorrent client. Can you point to any existing requests for a feature like this? Also can you post screenshots of this feature in the Web UI and GUI?

[n-peugnet]

Here are the screenshot of the updated parts of the UI:

GUI

WebUi

I suspect some team members will be opposed to introducing such functionality into a BitTorrent client.

The main idea was to be able to set a dark theme for the WebUi. As I found an already existing dark theme, I thought that the easiest way to have the WebUi in dark was to add a custom css feature.
Maybe a more restrictive theme chooser between the current white theme and a new dark theme could be more suitable ?

Can you point to any existing requests for a feature like this?

I searched for this but didn't find any though it's related to the dark theme discussions like #6434

[WolfganP]

My concern is that now you have 2 points for modifying the same WebUI look and feel, and maybe introducing override conflicts.
What will be different from introducing the CSS changes via this config rather than modifying the .css file/s of the alt WebUI in use and just reload the page?

[glassez]

If you need a custom WebUI, just use "Alternative WebUI" feature, it is provided for all such purposes.

[zero77]

@glassez

If you need a custom WebUI, just use "Alternative WebUI" feature, it is provided for all such purposes.

If you like the default web ui, but want a different theme, that's possible but would require the ability to use custom css.

https://github.com/gilbN/theme.park

[WolfganP]

@glassez

If you need a custom WebUI, just use "Alternative WebUI" feature, it is provided for all such purposes.

If you like the default web ui, but want a different theme, that's possible but would require the ability to use custom css.

https://github.com/gilbN/theme.park

Just copy the webUI files and alter the .css to your liking, then use them via the AltWebUI mechanism.

[n-peugnet]

Just copy the webUI files and alter the .css to your liking, then use them via the AltWebUI mechanism.

In my opinion, the problem with this approach is that you will have to manually update the WebUi and re-edit the files after each qBittorrent update to get the latest WebUi update. When with this solution the WebUi would still be updated as usual. Also this allows to change the theme without any kind of file access to the server.

I understand that the custom CSS could be a little bit overkill. But what would you think about a "dark theme" setting that could be used by any WebUi to switch between their own light and dark themes ?

[WolfganP]

I understand that the custom CSS could be a little bit overkill. But what would you think about a "dark theme" setting that could be used by any WebUi to switch between their own light and dark themes ?

That's exactly the problem, it won't apply to any WebUI, just the default and if this core WebUI changes, conflicts of precedence may arise. The other altWebUIs also need to follow the naming of this custom .css field and if not, it may also lead to unexpected results.

Visual problems attract a lot of project issues and are difficult to handle properly due to volume, so having 2 places affecting the visual style is a call for extra project maintenance work for the devs.

[n-peugnet]

I understand that the custom CSS could be a little bit overkill. But what would you think about a "dark theme" setting that could be used by any WebUi to switch between their own light and dark themes ?

That's exactly the problem, it won't apply to any WebUI, just the default and if this core WebUI changes, conflicts of precedence may arise. The other altWebUIs also need to follow the naming of this custom .css field and if not, it may also lead to unexpected results.

So here you are talking about the custom CSS feature of this PR, right ? To be compatible, an alternative WebUi would just have to add the <style>%CUSTOMCSS%</style> line in the two index.html files. This does not seem too complicated to me. Also they do not have to necessarily follow the same naming. The CSS can be customised to fit any WebUi.

Visual problems attract a lot of project issues and are difficult to handle properly due to volume, so having 2 places affecting the visual style is a call for extra project maintenance work for the devs.

The custom CSS is not meant to be maintained by the qBittorrent team it's a per user feature that each user is free to customise as he wants. If the result creates visual problems it's the user's problem and he will have to edit it's CSS himself.

[glassez]

Why don't you just use a suitable extension for your browser that allows you to redefine CSS for any site, not just for qBittorrent Web UI?

[github-actions]

This PR is stale because it has been 60 days with no activity. This PR will be automatically closed within 7 days if there is no further activity.

[github-actions]

This PR was closed because it has been stalled for some time with no activity.