diff --git a/src/webui/www/private/css/palette.css b/src/webui/www/private/css/palette.css index 10fcd991b..4816be0e2 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 388a509fd..96a6728f3 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 6f3f3e57a..1f140c978 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 ffa7b2bea..6bc3567d1 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,10 +2021,26 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD $("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) => { // 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); @@ -2294,10 +2320,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD $("rss_filter_textarea").setProperty("value", pref.rss_smart_episode_filters); // WebUI tab - // Language - updateWebuiLocaleSelect(pref.locale); - $("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); @@ -2426,6 +2448,16 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD // 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"); @@ -2712,10 +2744,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD settings["rss_smart_episode_filters"] = $("rss_filter_textarea").getProperty("value"); // WebUI tab - // Language - settings["locale"] = $("locale_select").getProperty("value"); - 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();