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 @@
qBittorrent Web User Interface Light theme
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) {