Webui: Add color scheme switcher

Closes #21600
qbittorrent · Oct 14, 2024 · 3e05854 · 3e05854
1 parent fb40275
commit 3e05854
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
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 {
+    &:has(#colorThemeCheckbox:checked) {
         color-scheme: light;
     }
-}
 
-/* Dark corrections */
-@media (prefers-color-scheme: dark) {
-    :root {
+    &:has(#colorThemeCheckbox:not(:checked)) {
         --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%)
+        #rssButtonBar img,
+        #startSearchButton img,
+        #manageSearchPlugins img {
+            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%)
             hue-rotate(156deg) brightness(106%) contrast(101%);
+        }
     }
 }
 
@@ -454,7 +446,7 @@ a.propButton img {
     margin: 0 6px -3px -18px;
 }
 
-#mainWindowTabs {
+#mainWindowTabs, label:has(> #colorThemeCheckbox) {
     float: right;
     margin: 4px 5px 0 0;
 }

diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
@@ -105,6 +105,7 @@ <h1 class="applicationTitle">qBittorrent Web User Interface <span class="version
                         </ul>
                     </li>
                 </ul>
+                <label><input id="colorThemeCheckbox" type="checkbox" checked> Light theme</label>
             </div>
             <div id="mochaToolbar">
                 &nbsp;&nbsp;

diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js
@@ -152,6 +152,11 @@ let selectedStatus = LocalPreferences.get("selected_filter", "all");
 let setStatusFilter = function() {};
 let toggleFilterDisplay = function() {};
 
+$("colorThemeCheckbox").addEventListener("change", (e) => {
+    const colorScheme = e.target.checked ? "light" : "dark";
+    LocalPreferences.set("colorScheme", colorScheme);
+});
+
 window.addEventListener("DOMContentLoaded", () => {
     let isSearchPanelLoaded = false;
     let isLogPanelLoaded = false;
@@ -1656,6 +1661,25 @@ window.addEventListener("load", () => {
     window.qBittorrent.Cache.preferences.init();
     window.qBittorrent.Cache.qbtVersion.init();
 
+    // Setup color scheme switching
+    const firstRun = true;
+    const updateColorScheme = () => {
+        const checkbox = $("colorThemeCheckbox");
+        const colorScheme = LocalPreferences.get("colorScheme");
+        if (colorScheme != null) {
+            if (firstRun)
+                checkbox.checked = (colorScheme === "light"); // This doesn't emit the 'change' event
+            return;
+        }
+        const isDark = window?.matchMedia?.("(prefers-color-scheme:dark)")?.matches ?? false;
+        checkbox.checked = !isDark; // This doesn't emit the 'change' event
+    };
+    if(window.matchMedia) {
+        const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        colorSchemeQuery.addEventListener("change", updateColorScheme);
+    }
+    updateColorScheme();
+
     // switch to previously used tab
     const previouslyUsedTab = LocalPreferences.get("selected_window_tab", "transfers");
     switch (previouslyUsedTab) {