Webui: Add color scheme switcher

sledgehammer999 · sledgehammer999 · commit 3aefc16c5779 · 2024-11-02T13:11:05.000+02:00
Closes qbittorrent#21600
diff --git 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
@@ -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
@@ -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
@@ -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>QBT_TR(Transfer list)QBT_TR[CONTEXT=OptionsDialog]</legend>
         <div class="formRow" style="margin-bottom: 3px;" title="QBT_TR(Shows a confirmation dialog upon torrent deletion)QBT_TR[CONTEXT=OptionsDialog]">
@@ -2128,6 +2138,18 @@
             $("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) => {
@@ -2419,6 +2441,7 @@
                     // WebUI tab
                     // Language
                     updateWebuiLocaleSelect(pref.locale);
+                    updateColoSchemeSelect();
                     $("performanceWarning").checked = pref.performance_warning;
 
                     // HTTP Server
@@ -2845,6 +2868,13 @@
             // WebUI 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;
 
             // HTTP Server
