starred/qBittorrent

Fork 0

mirror of https://github.com/qbittorrent/qBittorrent.git synced 2026-03-02 22:57:32 -05:00

WebUI default background color #16382

New issue

Open

opened 2026-02-22 03:04:23 -05:00 by deekerman · 4 comments

deekerman commented

2026-02-22 03:04:23 -05:00

Owner

Originally created by @anddam on GitHub (Nov 22, 2024).

qBittorrent & operating system versions

qBittorrent: v5.0.2 (I guess, that's what WebUI's About dialog says)
Operating system: Void Linux
Qt: 6.8.0
Libtorrent: 1.2.19.0

Additional deps:
Boost: 1.86.0
OpenSSL: 3.4.0
zlib: 1.3.1.zlib-ng

What is the problem?

The CSS seems to rely on browsers default white background color, thus uses rgb(0,0,0,0) where it means "white".

When embedded in an iframe with a different background (e.g. in Organizr) this results in very poor readability.

The app should set the base background color it relies on, for instance setting background color: white on body element

Steps to reproduce

start webui
open inspector
select body element
add background-color: black; to the element style
enjoy the headache

Additional context

Log(s) & preferences file(s)

There are no logs or preference involved.

Originally created by @anddam on GitHub (Nov 22, 2024). ### qBittorrent & operating system versions qBittorrent: v5.0.2 (I guess, that's what WebUI's About dialog says) Operating system: Void Linux Qt: 6.8.0 Libtorrent: 1.2.19.0 Additional deps: Boost: 1.86.0 OpenSSL: 3.4.0 zlib: 1.3.1.zlib-ng ### What is the problem? The CSS seems to rely on browsers default white background color, thus uses rgb(0,0,0,0) where it means "white". When embedded in an iframe with a different background (e.g. in Organizr) this results in very poor readability. The app should set the base background color it relies on, for instance setting `background color: white` on `body` element ### Steps to reproduce 1. start webui 2. open inspector 3. select `body` element 4. add `background-color: black;` to the element style 5. enjoy the headache ### Additional context ![Screenshot 2024-11-22 162126](https://github.com/user-attachments/assets/0210aeb2-a154-4d2f-9ff2-c763de57aaff) ### Log(s) & preferences file(s) There are no logs or preference involved.

deekerman added the

WebUI

Look and feel

Themes

labels

2026-02-22 03:04:23 -05:00

deekerman commented

2026-02-22 03:04:28 -05:00

Author

Owner

@HanabishiRecca commented on GitHub (Nov 22, 2024):

Yeah, that's another consequence of not setting the background color explicitly.

@skomerko, @Piccirello, maybe we just drop in the background color.
Regarding a particular color choice, as mentioned in https://github.com/qbittorrent/qBittorrent/pull/21498#issuecomment-2399929576, we could use one that Chrome picks - #121212.
And maybe light theme background should be explicitly set too, just in case.

@HanabishiRecca commented on GitHub (Nov 22, 2024): Yeah, that's another consequence of not setting the background color explicitly. @skomerko, @Piccirello, maybe we just drop in the background color. Regarding a particular color choice, as mentioned in https://github.com/qbittorrent/qBittorrent/pull/21498#issuecomment-2399929576, we could use one that Chrome picks - `#121212`. And maybe light theme background should be explicitly set too, just in case.

deekerman commented

2026-02-22 03:04:28 -05:00

Author

Owner

@anddam commented on GitHub (Nov 23, 2024):

And maybe light theme background should be explicitly set too, just in case.

Yes, notice that unlike PR #21498 my report is not for dark theme, what you see in the screenshot is the default light theme, only within Organizr that has a black background by default.

This is the same page accessed directly, with Chrome using a white background color

@anddam commented on GitHub (Nov 23, 2024): >And maybe light theme background should be explicitly set too, just in case. Yes, notice that unlike [PR #21498](https://github.com/qbittorrent/qBittorrent/pull/21498) my report is not for dark theme, what you see in the screenshot is the default light theme, only within Organizr that has a black background by default. This is the same page accessed directly, with Chrome using a white background color ![Screenshot 2024-11-23 224156](https://github.com/user-attachments/assets/07762402-7b28-467d-b020-7b78f3a241e9)

deekerman commented

2026-02-22 03:04:28 -05:00

Author

Owner

@sk0merko commented on GitHub (Nov 25, 2024):

Will https://github.com/qbittorrent/qBittorrent/pull/21914 be enough to fix your issue?

@sk0merko commented on GitHub (Nov 25, 2024): Will https://github.com/qbittorrent/qBittorrent/pull/21914 be enough to fix your issue?

deekerman commented

2026-02-22 03:04:28 -05:00

Author

Owner

@anddam commented on GitHub (Nov 28, 2024):

Will #21914 be enough to fix your issue?

Yep,

 body {
+    background-color: var(--color-background-primary);

In my specific case I configured Organizr to add a CSS rule to the iframe so it had a proper background.

@anddam commented on GitHub (Nov 28, 2024): > Will #21914 be enough to fix your issue? Yep, body { + background-color: var(--color-background-primary); In my specific case I configured Organizr to add a CSS rule to the iframe so it had a proper background.