From 3e0585434ba5977468d481479a3fcb2d08f7f9f3 Mon Sep 17 00:00:00 2001
From: sledgehammer999 <hammered999@gmail.com>
Date: Tue, 15 Oct 2024 01:33:25 +0300
Subject: [PATCH] Webui: Add color scheme switcher

Closes #21600
---
 src/webui/www/private/css/style.css     | 24 ++++++++----------------
 src/webui/www/private/index.html        |  1 +
 src/webui/www/private/scripts/client.js | 24 ++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index b99be2d0263..4e90c14d05e 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 {
+    &: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
index a92fbe29aa0..5d15a7897b3 100644
--- 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
index 83db30de8cb..cb91a66d4cb 100644
--- 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) {