Add dark theme for WebUI

[d47081]

Created common branch for

#19888
#19847

Feature request:

#19844

All next contribution will be here:

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

[Chocobo1]

Also you might want to run the CI checks locally so you don't need to wait for our CI.
You'll need to install nodejs & npm: https://nodejs.org/en/download/
After installation, open a command line at src/webui/www directory and run npm install.
Then you can run the checks: npm run lint && npm run format

[thalieht]

Please PR your palette suggestions to

Sorry i don't have any suggestions about colors.

[Chocobo1]

@d47081
This PR has no other task pending and is ready to merge, right?

In addition to my other comments, I intend to make the following changes (all by myself). I hope you'll be ok with it since it will apply on your git branch:

1. Move vanillaSelectBox.css out of lib directory
2. Revert changes to public folder and rely on <meta name="color-scheme" content="dark light"> instead.

If there are no objections, I'll apply the changes in the next few days and afterwards approve/merge it. Please leave this PR branch as is, I'll handle the rest.

[d47081]

This PR has no other task pending and is ready to merge, right?

I'm using this implementation about month in dark mode and found no problems there.

@thalieht said there is low contrast, but on my screen (iMac) - it's enough for me. Maybe it depend from monitor settings.

I'm also not designer, just grab previous blue/orange palette and adapted it (just reduced saturation to make not such toxic for eyes)

@Chocobo1 okay, just let me know if something needed from my side

[Chocobo1]

If there are no objections, I'll apply the changes in the next few days and afterwards approve/merge it.

@qbittorrent/bug-handlers
I've made the changes and tested it. This PR lay down the foundation for dark theme and the color palette can be fine tuned by others later. I consider this PR ready for approval and merge unless there are functionality broken. Please take a look.

Contrast between text and background when hovering over a line (the one in the middle) isn't very good in dark theme (firefox) and the same applies for the login fields.

Now the login page (mostly) uses color palette from the browser. IMO this page doesn't need to be heavily customized unlike the main window page (after login).
I'm mostly fine with the dark theme but I think the contrast for light theme is a bit low for me. Anyway it can be revised later.

[Chocobo1]

@d47081
Thank you!

[Mazino-Urek]

Can it be used to design a dark theme for the native app?

[d47081]

@Chocobo1 with pleasure!

Can it be used to design a dark theme for the native app?

Web UI is different component and not related with desktop theme

[spirillen]

How do you enable this dark mode? I'm using qb-nox and I don't see the option anywhere.

qBittorrent v5.0.0alpha1 Web UI (64-bit) ((linux))

[d47081]

It is environment-dependent, plus the skin at your screen looks cached

[spirillen]

It is environment-dependent

?? Not following you @d47081

skin at your screen looks cached

Should not be, have reloaded with ctrl + shift + r and ctrl + f5 so it should be the fresh one.

[zero77]

I am getting the same and i have use DuckDuckGo as an example to show the dark theme works on other websites.

[Aleksman4o]

Nice idea with dark theme, but why there so huge paddings? Default padding was better. Also progressbar can be fullheight. All together it looks weird.

[spirillen]

I am getting the same and i have use DuckDuckGo as an example to show the dark theme works on other websites.

And My Firefox-esr do not send info in light/dark theme... so should be a manual switch under settings

[asaf400]

Thanks for the merge, I like the official UI so I never switched to alternative Web UIs,
and at night using WebUI on the TV [HTPC] always burned my eyes 😅, but not anymore 👍