Adaptive Web UI

[d47081]

Suggestion

What about environmental-dependent UI implementation?

It's simple to do by removing current background/color definitions in CSS and add following construction

:root {
  color-scheme: light dark;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Use case

It would be nice to have adaptive template from the original installation, without any third party alt-UIs

Extra info/examples/attachments

For dark environment I have following result in web console:

[glassez]

@d47081
You could provide PR with proposed changes so anyone can review and discuss it.

[d47081]

@glassez yes, maybe I'll do that

just a question - it's possible to change these files somewhere in linux installation to test without qbittorrent-nox re-compilation? Or all those files included into binaries

[xavier2k6]

Related:

• Dark theme for WebUI #18886

[xavier2k6]

Also take note of below:

• Do not use gif images for background but CSS instead #11163

[d47081]

Well, I have started from the login page: #19847

At this moment it looks as below:

Not sure about native settings in FF, please somebody check what is there by default:

Settings - General - Color - Use system colors

About the internal pages, I think we should drop background GIFs as bit deprecated.

What do you think about, have a sense to continue by this way / PR implementation?

[Chocobo1]

About the internal pages, I think we should drop background GIFs as bit deprecated.

I agree but what do you replace it with?

What do you think about, have a sense to continue by this way / PR implementation?

Yes! Also please split into smaller PR. I would suggest submitting 'drop GIFs' as one PR and dark theme another PR.

IIRC some 3rd-party webui had already done some dark theming work and maybe some of them may agree to port the some of the changes back. For example this: https://github.com/crash0verride11/DarkLight-qBittorent-WebUI

[d47081]

I agree but what do you replace it with?

Suppose CSS can do everything in 2023

Yes! Also please split into smaller PR.

Not sure PR useful without removing default background and color attributes.
But maybe you're right to separate this task, just I have a draft that already includes lot of another changes in private folder

There is few moments I would like to do:

1. remove all background definitions (including gifs components related to BG only, eg tabs)
2. remove all color definitions, exluding special ones (like error text colors, that readable in light/dark modes)
3. I have doubts about background color implementation for the popup menus and windows - is there any wishes?

Maybe good idea to replace deprecated GIF navigation icons too, with SVG, maybe to Bootstrap icons, or similar. But this subject for another task and requires licensing audit.

maybe some of them may agree to port the some of the changes back

I have tested few alt web UIs (like adaptive VueTorrent) and think that's better idea to port some completed solution into official client instead of adapt current version as requires lot of rewritings. IMHO.
At least current client requires mobile optimization (even I'm not mobile user) and I did not checked JS versions yet

Just tried DarkLight-qBittorent-WebUI and it's not work with the main branch (same issue)

[Chocobo1]

I have a draft that already includes lot of another changes in private folder

Just a reminder, we have a compatibility matrix here: https://github.com/qbittorrent/qBittorrent/tree/master/src/webui/www#browser-compatibility

Maybe good idea to replace deprecated GIF navigation icons too, with SVG, maybe to Bootstrap icons, or similar. But this subject for another task and requires licensing audit.

FYI, qbt is licensed under GPL 3.0+ so any license that is compatible with it is ok.
I fully agree to use CSS or SVG icons to replace all non-vector icons/resources.

I have tested few alt web UIs (like adaptive VueTorrent) and think that's better idea to port some completed solution into official client instead of adapt current version as requires lot of rewritings. IMHO.

I had this same idea a while ago but now I'm not so sure. At the time of my survey, all other alternative web UIs provide less features than the qbt built-in and we couldn't find one that could replace it. Maybe they are better now but I'm not sure. So I decided that we keep maintaining the current old UI as a reference. It may be old and not mobile friendly but at least for users it is usable.
I also want to provide some hints/pointers for users of built-in WebUI that will point them to the existent of alternative web UIs but I haven't materialized that idea.

[d47081]

Just a reminder, we have a compatibility matrix here

I'm backend developer, so can test on FF/Chromium at this moment, following just specifications like this one:
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#browser_compatibility

I fully agree to use CSS or SVG icons to replace all non-vector icons/resources.

I think this subject for another step, like mobile adaptation.

I had this same idea a while ago but now I'm not so sure.

Even I have tried another Web UI, still using and like original one, just need a dark environment fix (for myself at least).

---

About the PRs, as I have already updated lot of color points (beside GIF backgrounds) I propose to PR this draft as is (on complete)

Every my change there marked by #19844 issue comment in CSS, so revisors could rollback any change if that needed.
As said before, removing just background GIFs in single commit/PR not pretty useful and I can't test BG removing without redefine background color.

Okay?

[d47081]

Well, here is update for the public Web UI part:
#19888

I'm not designer, and prefer dark mode in tests.

If someone have proposition about palette and it contrast, please feel free to deedback.
Also, have changed some paddings and search form position.

@Chocobo1 this PR is just minimum required to make it work, I don't know how to separate it on smaller parts, so this request as is, please comment - I would glad to fix, or contribute to my branch - will merge it into the PR request.

B/W Linux, FF (tested on iMac screen)

Chromium

[d47081]

Almost done
#19901

Please test in different environments and comment flat design / padding / palette updates

Brunch to merge
https://github.com/d47081/qBittorrent/tree/adaptive-webui

[knghtbrd]

Please test in different environments and comment flat design / padding / palette updates

Have you gotten any feedback on this? I haven't had a ton of time to poke at it in-depth, but it looks pretty good from the poking at it I've done. I've had to be a little careful with this as all of my private trackers promise they'll ban me SO fast if they catch me using a devel build, so I kinda had to apply your patch over 4.6.2, which wasn't too difficult.

When it's otherwise deemed ready, I'd argue the best thing to do is merge it and assume there will be one or two regressions that need patching. There always are. (So I'd suggest not merging it moments before the next version releases so there's time for people to find them if (when) they exist.

[glassez]

How about getting users' attention to this PR? Otherwise, I'm looking forward to another storm of outrage as soon as an update that includes these changes is released (like in case with latest colors/icons changes).

[xavier2k6]

How about getting users' attention to this PR? Otherwise, I'm looking forward to another storm of outrage as soon as an update that includes these changes is released (like in case with latest colors/icons changes).

@Pentaphon Time to rally those abundant users!

[Pentaphon]

How about getting users' attention to this PR?

Time to rally those abundant users!

How about...

1. making an announcement on https://www.qbittorrent.org/news to bring people here and explaining what they need to do

2. stickying this github issue?

[glassez]

making an announcement on https://www.qbittorrent.org/news to bring people here and explaining what they need to do

People don't read qBittorrent site in the same way as GitHub. We announced the upcoming changes related to WebUI credentials there, but no one paid attention to it. Everyone has a reason why they were not notified, and that it is the fault of the qBittorrent developers. Damn, it looks like we should knock on everyone's door and notify them personally. Okay, this is a joke (hopefully). Perhaps there are some places with more user activity? Some forums, etc.

[Pentaphon]

Perhaps there are some places with more user activity? Some forums, etc.

https://www.reddit.com/r/qBittorrent/
https://www.reddit.com/r/torrents/

That and sticky-ing this issue should get enough eyes.

[glassez]

That and sticky-ing this issue should get enough eyes.

IIRC, PR cannot be "sticky".

[Pentaphon]

IIRC, PR cannot be "sticky".

But you can certainly sticky this issue and direct people to the PR, right?

Either way, I really think the /news portion of the homepage should be used more often. Or at the very least, the Qbit forums.

[KyleSanderson]

How about getting users' attention to this PR? Otherwise, I'm looking forward to another storm of outrage as soon as an update that includes these changes is released (like in case with latest colors/icons changes).

I'd just make it configurable man and keep it steady. Sites have stylesheets, why doesn't qBittorrent. There's also the translations issue with the later versions so multi-lingual folks are trapped on custom older versions because of that.

Dark mode was highly requested though, so hopefully it resolves half the noise. I didn't look at the code, but if this is a "magic" dark mode and not a toggle / configuration item anywhere - someone's still going to be upset.

[thezoggy]

is this feature supposed to be working in 4.6.2?
setting os to dark mode and browser to dark mode, qbit webui is still light.

[thalieht]

is this feature supposed to be working in 4.6.2?

No, it's targeted for 5.0