WebUI: Add color scheme switcher #21613

sledgehammer999 · 2024-10-14T22:44:43Z

Sometimes I am bored and want to try new things. This time I wanted to code the WebUI.

If user hasn't explicitly set validly his preference -> Use system/browser preference and react to changes to it
If user has explicitly and validly set his preference -> Use the user's settings and don't react to system/browser preference change

Obligatory pic:

src/webui/www/private/scripts/client.js

Pentaphon · 2024-10-15T04:27:55Z

Honestly, this would look a lot better if you simply had a sun/moon toggle button. No need to take up all that space with text and a checkbox. I'd go with that instead and put the toggle at the bottom right corner. If you want to keep it using text, I'd put it under the view dropdown. Anything but the checkbox and text, which looks very out of place.

HanabishiRecca · 2024-10-15T18:45:00Z

I would vote for not inventing anything special here. Just make a regular selector in the settings.
With clear and obvious options: System, Light and Dark. Same as in #21615.

sledgehammer999 · 2024-10-15T21:06:59Z

I would vote for not inventing anything special here. Just make a regular selector in the settings.

Do you mean in the Settings/Preferences dialog or in the menu (eg View)?

HanabishiRecca · 2024-10-15T21:22:24Z

A regular option in the settings dialog. For example:

wolfdael · 2024-10-20T17:04:26Z

Its a humble request. Please merge this for webui ASAP. I have chronic floaters in my eye (what are floaters?) and I cant see well in situations like inverted dark mode. Seemingly, the current webui torrent list and rss list look like inverted dark mode and I am so lost when looking at the screen because I cant read. Currently, I am using a android client to connect to the local docker. Due to my setup, I am not able to downgrade as well. Thank you @sledgehammer999 @HanabishiRecca

HanabishiRecca · 2024-10-20T17:10:24Z

Wdym by "inverted dark mode"? And if you have issues with dark modes, why do you have the dark mode enabled in your system/browser?

sledgehammer999 · 2024-10-20T21:53:35Z

I have addressed the comments.

src/webui/www/private/views/preferences.html

src/webui/www/private/scripts/client.js

src/webui/www/private/views/preferences.html

src/webui/www/private/scripts/client.js

sledgehammer999 · 2024-10-21T09:14:45Z

src/webui/www/private/views/preferences.html

+            if (colorScheme === 0)
+                LocalPreferences.remove("color_scheme");
+            else if (colorScheme === 1)
+                LocalPreferences.set("color_scheme", "light");


Should I use camelCase for the settings' key too?

I don't think we have rules for it. Snake case is fine for now.

sledgehammer999 · 2024-10-21T09:18:04Z

I think I am done with the modifications now.

skomerko · 2024-10-21T09:28:18Z

I think I am done with the modifications now.

There is still one issue present - white theme flash on page load when using a dark theme (and vice versa). I can guarantee users will complain about that right after release if not further changes are made.

sledgehammer999 · 2024-10-21T09:40:12Z

I think I am done with the modifications now.

There is still one issue present - white theme flash on page load when using a dark theme. I can guarantee users will complain about that right after release if not further changes are made.

I am not well versed in the webui world.
Currently we set the theme inside the "load" signal handler. Aka it runs immediately after the page is rendered. Each time the user changes the setting, the page is reloaded and the signal handler is run again.

What's the preferred solution here for time run and subsequent user change?

HanabishiRecca · 2024-10-21T10:08:33Z

Currently we set the theme inside the "load" signal handler. Aka it runs immediately after the page is rendered.

It's not.

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images, except those that are loaded lazily.

Which could have a large delay, depending on network connection speed.

If you want to fire immediately after the page is rendered, use document's DOMContentLoaded event.

It is a common mistake to use load where DOMContentLoaded would be more appropriate.

sledgehammer999 · 2024-10-21T10:11:25Z

I think I am done with the modifications now.

There is still one issue present - white theme flash on page load when using a dark theme. I can guarantee users will complain about that right after release if not further changes are made.

I am not well versed in the webui world. Currently we set the theme inside the "load" signal handler. Aka it runs immediately after the page is rendered. Each time the user changes the setting, the page is reloaded and the signal handler is run again.

What's the preferred solution here for time run and subsequent user change?

I don't know if it advisable to do so but a solution is:

Drop the defer script attribute from client.js in index.html
Do the setup of updateColorScheme() outside the signal handler for load, in the global scope. It will run as soon as the script loads and before the page renders.
I am not sure how to handle the user changing the setting afterwards. Will the page reload re-run the scripts?

HanabishiRecca · 2024-10-21T10:18:25Z

No, that's a terrible advice. Just use DOMContentLoaded event instead.
I.e. move your init code to somewhere under the

qBittorrent/src/webui/www/private/scripts/client.js

Line 155 in 784a8c7

window.addEventListener("DOMContentLoaded", () => {

But actually, as we use defer on scripts anyway, even DOMContentLoaded is not really needed.
You can just do your stuff inside the main script body.

skomerko · 2024-10-21T10:28:45Z

No, that's a terrible advice. Just use DOMContentLoaded event instead. I.e. move your init code to somewhere under the

qBittorrent/src/webui/www/private/scripts/client.js

Line 155 in 784a8c7

window.addEventListener("DOMContentLoaded", () => {

But actually, as we use defer on scripts anyway, even DOMContentLoaded is not really needed. You can just do your stuff inside the main script body.

I can't really check it right now but IIRC by the time DOMContentLoaded will fire, the browser may already have painted page's background. Adding a tiny render blocking script in the head will work for sure.

sledgehammer999 · 2024-10-21T10:37:00Z

Applying the following patch I notice 2 things:

On the very first render I don't see a white flash (with browser set to dark mode)
After a reload/refresh there's a flash of white background

diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js
index d3a8b783b..684c2cf95 100644
--- a/src/webui/www/private/scripts/client.js
+++ b/src/webui/www/private/scripts/client.js
@@ -25,6 +25,19 @@
 
 "use strict";
 
+// Setup color scheme switching
+const updateColorScheme = () => {
+    const root = document.documentElement;
+    const colorScheme = LocalPreferences.get("color_scheme");
+    const validScheme = (colorScheme === "light") || (colorScheme === "dark");
+    const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    root.classList.toggle("dark", ((!validScheme && isDark) || (colorScheme === "dark")));
+};
+
+const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+colorSchemeQuery.addEventListener("change", updateColorScheme);
+updateColorScheme();
+
 window.qBittorrent ??= {};
 window.qBittorrent.Client ??= (() => {
     const exports = () => {
@@ -1681,19 +1694,6 @@ window.addEventListener("load", () => {
     window.qBittorrent.Cache.preferences.init();
     window.qBittorrent.Cache.qbtVersion.init();
 
-    // Setup color scheme switching
-    const updateColorScheme = () => {
-        const root = document.documentElement;
-        const colorScheme = LocalPreferences.get("color_scheme");
-        const validScheme = (colorScheme === "light") || (colorScheme === "dark");
-        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        root.classList.toggle("dark", ((!validScheme && isDark) || (colorScheme === "dark")));
-    };
-
-    const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    colorSchemeQuery.addEventListener("change", updateColorScheme);
-    updateColorScheme();
-
     // switch to previously used tab
     const previouslyUsedTab = LocalPreferences.get("selected_window_tab", "transfers");
     switch (previouslyUsedTab) {

HanabishiRecca · 2024-10-21T10:40:15Z

That's a bit complicated topic yeah.

DOMContentLoaded does not wait for stylesheets to load, however deferred scripts do wait for stylesheets, and the DOMContentLoaded event is queued after deferred scripts.

HanabishiRecca · 2024-10-21T11:11:45Z

We could do it vice versa though: load the dark theme initially, then switch to the light.
I.e. instead of .dark class there would be .light.
Light mode users are not afraid of black screen flashes afaik.

HanabishiRecca · 2024-10-21T11:19:08Z

Another way: simply setting class="dark" inside the html also works.

--- a/src/webui/www/private/index.html
+++ b/src/webui/www/private/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="${LANG}">
+<html lang="${LANG}" class="dark">
 
 <head>
     <meta charset="UTF-8">

sledgehammer999 · 2024-10-24T11:30:26Z

@Chocobo1 should I follow @HanabishiRecca recommendation (apply dark class) or do you have something else to propose?

Chocobo1 · 2024-10-31T20:23:11Z

@Chocobo1 should I follow @HanabishiRecca recommendation (apply dark class) or do you have something else to propose?

I think it is fine. I would also add a code comment about avoiding the bright flash.

sledgehammer999 · 2024-11-01T20:04:53Z

I added the dark class by default to the html.

src/webui/www/private/scripts/client.js

Chocobo1 · 2024-11-02T08:06:28Z

src/webui/www/private/views/preferences.html

+            if (colorScheme === 0)
+                LocalPreferences.remove("color_scheme");
+            else if (colorScheme === 1)
+                LocalPreferences.set("color_scheme", "light");


I don't think we have rules for it. Snake case is fine for now.

Closes qbittorrent#21600

HanabishiRecca · 2024-11-02T21:37:40Z

Hmm, seems like all iframe dialogs (download.html, upload.html etc.) ignore selected color scheme.
Unfortunately I didn't notice that earlier.

HanabishiRecca · 2024-11-02T22:58:57Z

Addressed in a new PR: #21750

Applies the color scheme for iframe dialogs. Fixup for #21613. PR #21750.

…witcher WebUI: Add color scheme switcher (v5_0_x) Bacport of #21613

sledgehammer999 added the WebUI WebUI-related issues/changes label Oct 14, 2024

sledgehammer999 force-pushed the webui_color_switcher branch from d63f6f8 to 3e05854 Compare October 14, 2024 22:46

sledgehammer999 commented Oct 14, 2024

View reviewed changes

src/webui/www/private/scripts/client.js Outdated Show resolved Hide resolved

glassez changed the title ~~Add color scheme switcher~~ WebUI: Add color scheme switcher Oct 15, 2024

sledgehammer999 force-pushed the webui_color_switcher branch from 3e05854 to 8967b01 Compare October 20, 2024 21:50

sledgehammer999 force-pushed the webui_color_switcher branch 3 times, most recently from 9cbec54 to e2fb7f3 Compare October 21, 2024 01:03

Chocobo1 reviewed Oct 21, 2024

View reviewed changes

sledgehammer999 force-pushed the webui_color_switcher branch 2 times, most recently from f386261 to 784a8c7 Compare October 21, 2024 09:12

sledgehammer999 commented Oct 21, 2024

View reviewed changes

sledgehammer999 force-pushed the webui_color_switcher branch 2 times, most recently from 537bf28 to 4ab3218 Compare November 1, 2024 20:03

Chocobo1 reviewed Nov 2, 2024

View reviewed changes

sledgehammer999 added 2 commits November 2, 2024 13:11

Webui: Add color scheme switcher

3aefc16

Closes qbittorrent#21600

Reorder code to match UI

13e3192

sledgehammer999 force-pushed the webui_color_switcher branch from 4ab3218 to 13e3192 Compare November 2, 2024 11:11

sledgehammer999 mentioned this pull request Nov 2, 2024

Integrate an option to choose a light or dark theme for the WebUI via the settings (mine is always dark since 5.0.x upgrade) #21745

Closed

Chocobo1 approved these changes Nov 2, 2024

View reviewed changes

sledgehammer999 merged commit 0771970 into qbittorrent:master Nov 2, 2024
14 checks passed

sledgehammer999 deleted the webui_color_switcher branch November 2, 2024 14:31

sledgehammer999 mentioned this pull request Nov 2, 2024

WebUI: Add color scheme switcher (v5_0_x) #21748

Merged

HanabishiRecca mentioned this pull request Nov 2, 2024

WebUI: fix color scheme for iframes #21750

Merged

Chocobo1 pushed a commit that referenced this pull request Nov 9, 2024

WebUI: fix color scheme for iframes

06fe3e5

Applies the color scheme for iframe dialogs. Fixup for #21613. PR #21750.

sledgehammer999 added a commit that referenced this pull request Nov 9, 2024

Merge pull request #21748 from sledgehammer999/backport_webui_color_s…

1e27e65

…witcher WebUI: Add color scheme switcher (v5_0_x) Bacport of #21613

HanabishiRecca mentioned this pull request Nov 9, 2024

WebUI: fix color scheme for iframes (v5_0_x) #21810

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebUI: Add color scheme switcher #21613

WebUI: Add color scheme switcher #21613

sledgehammer999 commented Oct 14, 2024 •

edited

Loading

Pentaphon commented Oct 15, 2024 •

edited

Loading

HanabishiRecca commented Oct 15, 2024 •

edited

Loading

sledgehammer999 commented Oct 15, 2024

HanabishiRecca commented Oct 15, 2024 •

edited

Loading

wolfdael commented Oct 20, 2024

HanabishiRecca commented Oct 20, 2024

sledgehammer999 commented Oct 20, 2024

sledgehammer999 Oct 21, 2024

Chocobo1 Nov 2, 2024

sledgehammer999 commented Oct 21, 2024

skomerko commented Oct 21, 2024 •

edited

Loading

sledgehammer999 commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024 •

edited

Loading

sledgehammer999 commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024 •

edited

Loading

skomerko commented Oct 21, 2024 •

edited

Loading

sledgehammer999 commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024

sledgehammer999 commented Oct 24, 2024

Chocobo1 commented Oct 31, 2024

sledgehammer999 commented Nov 1, 2024

Chocobo1 Nov 2, 2024

HanabishiRecca commented Nov 2, 2024 •

edited

Loading

HanabishiRecca commented Nov 2, 2024

WebUI: Add color scheme switcher #21613

WebUI: Add color scheme switcher #21613

Conversation

sledgehammer999 commented Oct 14, 2024 • edited Loading

Pentaphon commented Oct 15, 2024 • edited Loading

HanabishiRecca commented Oct 15, 2024 • edited Loading

sledgehammer999 commented Oct 15, 2024

HanabishiRecca commented Oct 15, 2024 • edited Loading

wolfdael commented Oct 20, 2024

HanabishiRecca commented Oct 20, 2024

sledgehammer999 commented Oct 20, 2024

sledgehammer999 Oct 21, 2024

Choose a reason for hiding this comment

Chocobo1 Nov 2, 2024

Choose a reason for hiding this comment

sledgehammer999 commented Oct 21, 2024

skomerko commented Oct 21, 2024 • edited Loading

sledgehammer999 commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024 • edited Loading

sledgehammer999 commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024 • edited Loading

skomerko commented Oct 21, 2024 • edited Loading

sledgehammer999 commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024

HanabishiRecca commented Oct 21, 2024

sledgehammer999 commented Oct 24, 2024

Chocobo1 commented Oct 31, 2024

sledgehammer999 commented Nov 1, 2024

Chocobo1 Nov 2, 2024

Choose a reason for hiding this comment

HanabishiRecca commented Nov 2, 2024 • edited Loading

HanabishiRecca commented Nov 2, 2024

sledgehammer999 commented Oct 14, 2024 •

edited

Loading

Pentaphon commented Oct 15, 2024 •

edited

Loading

HanabishiRecca commented Oct 15, 2024 •

edited

Loading

HanabishiRecca commented Oct 15, 2024 •

edited

Loading

skomerko commented Oct 21, 2024 •

edited

Loading

HanabishiRecca commented Oct 21, 2024 •

edited

Loading

HanabishiRecca commented Oct 21, 2024 •

edited

Loading

skomerko commented Oct 21, 2024 •

edited

Loading

HanabishiRecca commented Nov 2, 2024 •

edited

Loading