diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index b99be2d02..dec15e1d3 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -19,19 +19,11 @@ --color-icon-hover: brightness(0) invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%); - 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 { + &.dark { --color-accent-blue: hsl(210deg 42% 48%); --color-text-blue: hsl(210deg 88.1% 73.5%); --color-text-orange: hsl(26deg 65% 70%); @@ -43,13 +35,13 @@ --color-border-default: hsl(0deg 0% 33%); color-scheme: dark; - } - #rssButtonBar img, - #startSearchButton img, - #manageSearchPlugins img { - filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) - hue-rotate(156deg) brightness(106%) contrast(101%); + #rssButtonBar img, + #startSearchButton img, + #manageSearchPlugins img { + filter: brightness(0) saturate(100%) invert(100%) sepia(0%) + saturate(1%) hue-rotate(156deg) brightness(106%) contrast(101%); + } } } diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html index a92fbe29a..8905dc930 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 1f3562caf..ed6eb51fd 100644 --- a/src/webui/www/private/scripts/client.js +++ b/src/webui/www/private/scripts/client.js @@ -1738,6 +1738,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 1c112adcb..e9bb537e9 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] + + +
+
QBT_TR(Transfer list)QBT_TR[CONTEXT=OptionsDialog]
@@ -2128,10 +2138,26 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD $("locale_select").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 = () => { window.parent.qBittorrent.Cache.preferences.init({ onSuccess: (pref) => { // Behavior tab + // Language + updateWebuiLocaleSelect(pref.locale); + updateColoSchemeSelect(); + $("performanceWarning").checked = pref.performance_warning; document.getElementById("displayFullURLTrackerColumn").checked = (LocalPreferences.get("full_url_tracker_column", "false") === "true"); document.getElementById("hideZeroFiltersCheckbox").checked = (LocalPreferences.get("hide_zero_status_filters", "false") === "true"); $("dblclickDownloadSelect").value = LocalPreferences.get("dblclick_download", "1"); @@ -2417,10 +2443,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD $("rss_filter_textarea").value = pref.rss_smart_episode_filters; // WebUI tab - // Language - updateWebuiLocaleSelect(pref.locale); - $("performanceWarning").checked = pref.performance_warning; - // HTTP Server $("webui_domain_textarea").value = pref.web_ui_domain_list; $("webui_address_value").value = pref.web_ui_address; @@ -2551,6 +2573,16 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD // Validate form data // Behavior tab + // Language + settings["locale"] = $("locale_select").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").checked; LocalPreferences.set("full_url_tracker_column", document.getElementById("displayFullURLTrackerColumn").checked.toString()); LocalPreferences.set("hide_zero_status_filters", document.getElementById("hideZeroFiltersCheckbox").checked.toString()); LocalPreferences.set("dblclick_download", $("dblclickDownloadSelect").value); @@ -2843,10 +2875,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD settings["rss_smart_episode_filters"] = $("rss_filter_textarea").value; // WebUI tab - // Language - settings["locale"] = $("locale_select").value; - settings["performance_warning"] = $("performanceWarning").checked; - // HTTP Server settings["web_ui_domain_list"] = $("webui_domain_textarea").value; const web_ui_address = $("webui_address_value").value.toString();