From 84ee620fdc74ecb21129ed24918c70f0ea24bc24 Mon Sep 17 00:00:00 2001 From: sledgehammer999 Date: Tue, 15 Oct 2024 01:33:25 +0300 Subject: [PATCH 1/2] Webui: Add color scheme switcher Closes #21600 --- src/webui/www/private/css/palette.css | 22 ++++---------- src/webui/www/private/index.html | 3 +- src/webui/www/private/scripts/client.js | 13 +++++++++ src/webui/www/private/views/preferences.html | 30 ++++++++++++++++++++ 4 files changed, 50 insertions(+), 18 deletions(-) diff --git a/src/webui/www/private/css/palette.css b/src/webui/www/private/css/palette.css index 10fcd991b05..4816be0e291 100644 --- a/src/webui/www/private/css/palette.css +++ b/src/webui/www/private/css/palette.css @@ -1,7 +1,7 @@ /* Adaptive color palette */ /* Default rules */ -* { +:root { --color-accent-blue: hsl(210deg 65% 55%); --color-text-blue: hsl(210deg 100% 55%); --color-text-orange: hsl(26deg 100% 45%); @@ -16,26 +16,12 @@ --color-background-hover: hsl(26deg 80% 60%); --color-border-blue: hsl(210deg 42% 48%); --color-border-default: hsl(0deg 0% 85%); -} - -:root { - color-scheme: light dark; -} -/* Light corrections */ -@media (prefers-color-scheme: light) { - :root { + &:not(.dark) { color-scheme: light; } -} -/* Dark corrections */ -@media (prefers-color-scheme: dark) { - :root { - color-scheme: dark; - } - - * { + &.dark { --color-accent-blue: hsl(210deg 42% 48%); --color-text-blue: hsl(210deg 88.1% 73.5%); --color-text-orange: hsl(26deg 65% 70%); @@ -45,5 +31,7 @@ --color-background-default: hsl(0deg 0% 25%); --color-background-hover: hsl(26deg 50% 55%); --color-border-default: hsl(0deg 0% 33%); + + color-scheme: dark; } } diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html index 388a509fd69..96a6728f35a 100644 --- a/src/webui/www/private/index.html +++ b/src/webui/www/private/index.html @@ -1,5 +1,6 @@ - + + diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js index 6f3f3e57a7a..1f140c978a0 100644 --- a/src/webui/www/private/scripts/client.js +++ b/src/webui/www/private/scripts/client.js @@ -1667,6 +1667,19 @@ window.addEventListener("load", () => { window.qBittorrent.Cache.preferences.init(); window.qBittorrent.Cache.qbtVersion.init(); + // Setup color scheme switching + const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const updateColorScheme = () => { + const root = document.documentElement; + const colorScheme = LocalPreferences.get("color_scheme"); + const validScheme = (colorScheme === "light") || (colorScheme === "dark"); + const isDark = colorSchemeQuery.matches; + root.classList.toggle("dark", ((!validScheme && isDark) || (colorScheme === "dark"))); + }; + + colorSchemeQuery.addEventListener("change", updateColorScheme); + updateColorScheme(); + // switch to previously used tab const previouslyUsedTab = LocalPreferences.get("selected_window_tab", "transfers"); switch (previouslyUsedTab) { diff --git a/src/webui/www/private/views/preferences.html b/src/webui/www/private/views/preferences.html index ffa7b2bea20..01ba710b258 100644 --- a/src/webui/www/private/views/preferences.html +++ b/src/webui/www/private/views/preferences.html @@ -7,6 +7,16 @@ +
+ QBT_TR(Interface)QBT_TR[CONTEXT=OptionsDialog] + + +
+
@@ -2011,6 +2021,18 @@ $("locale_select").setProperty("value", selected); }; + const updateColoSchemeSelect = () => { + const combobox = document.getElementById("colorSchemeSelect"); + const colorScheme = LocalPreferences.get("color_scheme"); + + if (colorScheme === "light") + combobox.options[1].selected = true; + else if (colorScheme === "dark") + combobox.options[2].selected = true; + else + combobox.options[0].selected = true; + }; + const loadPreferences = function() { window.parent.qBittorrent.Cache.preferences.init({ onSuccess: (pref) => { @@ -2296,6 +2318,7 @@ // WebUI tab // Language updateWebuiLocaleSelect(pref.locale); + updateColoSchemeSelect(); $("performanceWarning").setProperty("checked", pref.performance_warning); // HTTP Server @@ -2714,6 +2737,13 @@ // WebUI tab // Language settings["locale"] = $("locale_select").getProperty("value"); + const colorScheme = Number(document.getElementById("colorSchemeSelect").value); + if (colorScheme === 0) + LocalPreferences.remove("color_scheme"); + else if (colorScheme === 1) + LocalPreferences.set("color_scheme", "light"); + else + LocalPreferences.set("color_scheme", "dark"); settings["performance_warning"] = $("performanceWarning").getProperty("checked"); // HTTP Server From 6d6f9bc619638be2afa218f3662585cee38bd548 Mon Sep 17 00:00:00 2001 From: sledgehammer999 Date: Mon, 21 Oct 2024 00:49:22 +0300 Subject: [PATCH 2/2] Reorder code to match UI --- src/webui/www/private/views/preferences.html | 30 +++++++++----------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/webui/www/private/views/preferences.html b/src/webui/www/private/views/preferences.html index 01ba710b258..6bc3567d1aa 100644 --- a/src/webui/www/private/views/preferences.html +++ b/src/webui/www/private/views/preferences.html @@ -2037,6 +2037,10 @@ window.parent.qBittorrent.Cache.preferences.init({ onSuccess: (pref) => { // Behavior tab + // Language + updateWebuiLocaleSelect(pref.locale); + updateColoSchemeSelect(); + $("performanceWarning").setProperty("checked", pref.performance_warning); $("filelog_checkbox").setProperty("checked", pref.file_log_enabled); $("filelog_save_path_input").setProperty("value", pref.file_log_path); $("filelog_backup_checkbox").setProperty("checked", pref.file_log_backup_enabled); @@ -2316,11 +2320,6 @@ $("rss_filter_textarea").setProperty("value", pref.rss_smart_episode_filters); // WebUI tab - // Language - updateWebuiLocaleSelect(pref.locale); - updateColoSchemeSelect(); - $("performanceWarning").setProperty("checked", pref.performance_warning); - // HTTP Server $("webui_domain_textarea").setProperty("value", pref.web_ui_domain_list); $("webui_address_value").setProperty("value", pref.web_ui_address); @@ -2449,6 +2448,16 @@ // Validate form data // Behavior tab + // Language + settings["locale"] = $("locale_select").getProperty("value"); + const colorScheme = Number(document.getElementById("colorSchemeSelect").value); + if (colorScheme === 0) + LocalPreferences.remove("color_scheme"); + else if (colorScheme === 1) + LocalPreferences.set("color_scheme", "light"); + else + LocalPreferences.set("color_scheme", "dark"); + settings["performance_warning"] = $("performanceWarning").getProperty("checked"); settings["file_log_enabled"] = $("filelog_checkbox").getProperty("checked"); settings["file_log_path"] = $("filelog_save_path_input").getProperty("value"); settings["file_log_backup_enabled"] = $("filelog_backup_checkbox").getProperty("checked"); @@ -2735,17 +2744,6 @@ settings["rss_smart_episode_filters"] = $("rss_filter_textarea").getProperty("value"); // WebUI tab - // Language - settings["locale"] = $("locale_select").getProperty("value"); - const colorScheme = Number(document.getElementById("colorSchemeSelect").value); - if (colorScheme === 0) - LocalPreferences.remove("color_scheme"); - else if (colorScheme === 1) - LocalPreferences.set("color_scheme", "light"); - else - LocalPreferences.set("color_scheme", "dark"); - settings["performance_warning"] = $("performanceWarning").getProperty("checked"); - // HTTP Server settings["web_ui_domain_list"] = $("webui_domain_textarea").getProperty("value"); const web_ui_address = $("webui_address_value").getProperty("value").toString();