Webui: Add color scheme switcher

Closes qbittorrent#21600
sledgehammer999 · Nov 2, 2024 · 84ee620 · 84ee620
1 parent 9413626
commit 84ee620
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 18 deletions.
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,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