From 84ee620fdc74ecb21129ed24918c70f0ea24bc24 Mon Sep 17 00:00:00 2001 From: sledgehammer999 Date: Tue, 15 Oct 2024 01:33:25 +0300 Subject: [PATCH] Webui: Add color scheme switcher Closes #21600 --- src/webui/www/private/css/palette.css | 22 ++++---------- src/webui/www/private/index.html | 3 +- src/webui/www/private/scripts/client.js | 13 +++++++++ src/webui/www/private/views/preferences.html | 30 ++++++++++++++++++++ 4 files changed, 50 insertions(+), 18 deletions(-) diff --git a/src/webui/www/private/css/palette.css b/src/webui/www/private/css/palette.css index 10fcd991b05..4816be0e291 100644 --- 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 index 388a509fd69..96a6728f35a 100644 --- a/src/webui/www/private/index.html +++ b/src/webui/www/private/index.html @@ -1,5 +1,6 @@ - + + diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js index 6f3f3e57a7a..1f140c978a0 100644 --- 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 index ffa7b2bea20..01ba710b258 100644 --- a/src/webui/www/private/views/preferences.html +++ b/src/webui/www/private/views/preferences.html @@ -7,6 +7,16 @@ +
+ QBT_TR(Interface)QBT_TR[CONTEXT=OptionsDialog] + + +
+
@@ -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