Merge pull request qbittorrent#21748 from sledgehammer999/backport_webui_color_switcher

sledgehammer999 · web-flow · commit 1e27e6504e6d · 2024-11-09T12:15:47.000+02:00
WebUI: Add color scheme switcher (v5_0_x) Bacport of qbittorrent#21613
diff --git 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
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html lang="${LANG}">
+<!-- Add the 'dark' class to prevent bright flash on page load -->
+<html lang="${LANG}" class="dark">
 
 <head>
     <meta charset="UTF-8" />
diff --git 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
@@ -7,6 +7,16 @@
         </select>
     </fieldset>
 
+    <fieldset class="settings">
+        <legend>QBT_TR(Interface)QBT_TR[CONTEXT=OptionsDialog]</legend>
+        <label for="colorSchemeSelect">QBT_TR(Color scheme:)QBT_TR[CONTEXT=OptionsDialog]</label>
+        <select id="colorSchemeSelect">
+            <option value="0">QBT_TR(Auto)QBT_TR[CONTEXT=OptionsDialog]</option>
+            <option value="1">QBT_TR(Light)QBT_TR[CONTEXT=OptionsDialog]</option>
+            <option value="2">QBT_TR(Dark)QBT_TR[CONTEXT=OptionsDialog]</option>
+        </select>
+    </fieldset>
+
     <fieldset class="settings">
         <legend>
             <input type="checkbox" id="filelog_checkbox" onclick="qBittorrent.Preferences.updateFileLogEnabled();" />
@@ -2011,10 +2021,26 @@
             $("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 @@
                     $("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 @@
             // 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 @@
             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();
