github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-20 21:33:27 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #21748 from sledgehammer999/backport_webui_color_switcher

Browse source 
WebUI: Add color scheme switcher (v5_0_x)

Bacport of #21613
This commit is contained in:
sledgehammer999 2024-11-09 12:15:47 +02:00 • committed by GitHub
commit 1e27e6504e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 56 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/webui/www/private/css/palette.css
View file

@ -1,7 +1,7 @@
/* Adaptive color palette */ /* Adaptive color palette */
/* Default rules */ /* Default rules */
* { :root {
--color-accent-blue: hsl(210deg 65% 55%); --color-accent-blue: hsl(210deg 65% 55%);
--color-text-blue: hsl(210deg 100% 55%); --color-text-blue: hsl(210deg 100% 55%);
--color-text-orange: hsl(26deg 100% 45%); --color-text-orange: hsl(26deg 100% 45%);
@ -16,26 +16,12 @@
--color-background-hover: hsl(26deg 80% 60%); --color-background-hover: hsl(26deg 80% 60%);
--color-border-blue: hsl(210deg 42% 48%); --color-border-blue: hsl(210deg 42% 48%);
--color-border-default: hsl(0deg 0% 85%); --color-border-default: hsl(0deg 0% 85%);
}
:root { &:not(.dark) {
color-scheme: light dark;
}
/* Light corrections */
@media (prefers-color-scheme: light) {
:root {
color-scheme: light; color-scheme: light;
} }
}
/* Dark corrections */ &.dark {
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
* {
--color-accent-blue: hsl(210deg 42% 48%); --color-accent-blue: hsl(210deg 42% 48%);
--color-text-blue: hsl(210deg 88.1% 73.5%); --color-text-blue: hsl(210deg 88.1% 73.5%);
--color-text-orange: hsl(26deg 65% 70%); --color-text-orange: hsl(26deg 65% 70%);
@ -45,5 +31,7 @@
--color-background-default: hsl(0deg 0% 25%); --color-background-default: hsl(0deg 0% 25%);
--color-background-hover: hsl(26deg 50% 55%); --color-background-hover: hsl(26deg 50% 55%);
--color-border-default: hsl(0deg 0% 33%); --color-border-default: hsl(0deg 0% 33%);
color-scheme: dark;
} }
} }

3
src/webui/www/private/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="${LANG}"> <!-- Add the 'dark' class to prevent bright flash on page load -->
<html lang="${LANG}" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

13
src/webui/www/private/scripts/client.js
View file

@ -1667,6 +1667,19 @@ window.addEventListener("load", () => {
window.qBittorrent.Cache.preferences.init(); window.qBittorrent.Cache.preferences.init();
window.qBittorrent.Cache.qbtVersion.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 // switch to previously used tab
const previouslyUsedTab = LocalPreferences.get("selected_window_tab", "transfers"); const previouslyUsedTab = LocalPreferences.get("selected_window_tab", "transfers");
switch (previouslyUsedTab) { switch (previouslyUsedTab) {

44
src/webui/www/private/views/preferences.html
View file

@ -7,6 +7,16 @@
</select> </select>
</fieldset> </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"> <fieldset class="settings">
<legend> <legend>
<input type="checkbox" id="filelog_checkbox" onclick="qBittorrent.Preferences.updateFileLogEnabled();" /> <input type="checkbox" id="filelog_checkbox" onclick="qBittorrent.Preferences.updateFileLogEnabled();" />
@ -2011,10 +2021,26 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
$("locale_select").setProperty("value", selected); $("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() { const loadPreferences = function() {
window.parent.qBittorrent.Cache.preferences.init({ window.parent.qBittorrent.Cache.preferences.init({
onSuccess: (pref) => { onSuccess: (pref) => {
// Behavior tab // Behavior tab
// Language
updateWebuiLocaleSelect(pref.locale);
updateColoSchemeSelect();
$("performanceWarning").setProperty("checked", pref.performance_warning);
$("filelog_checkbox").setProperty("checked", pref.file_log_enabled); $("filelog_checkbox").setProperty("checked", pref.file_log_enabled);
$("filelog_save_path_input").setProperty("value", pref.file_log_path); $("filelog_save_path_input").setProperty("value", pref.file_log_path);
$("filelog_backup_checkbox").setProperty("checked", pref.file_log_backup_enabled); $("filelog_backup_checkbox").setProperty("checked", pref.file_log_backup_enabled);
@ -2294,10 +2320,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
$("rss_filter_textarea").setProperty("value", pref.rss_smart_episode_filters); $("rss_filter_textarea").setProperty("value", pref.rss_smart_episode_filters);
// WebUI tab // WebUI tab
// Language
updateWebuiLocaleSelect(pref.locale);
$("performanceWarning").setProperty("checked", pref.performance_warning);
// HTTP Server // HTTP Server
$("webui_domain_textarea").setProperty("value", pref.web_ui_domain_list); $("webui_domain_textarea").setProperty("value", pref.web_ui_domain_list);
$("webui_address_value").setProperty("value", pref.web_ui_address); $("webui_address_value").setProperty("value", pref.web_ui_address);
@ -2426,6 +2448,16 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
// Validate form data // Validate form data
// Behavior tab // Behavior 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");
settings["file_log_enabled"] = $("filelog_checkbox").getProperty("checked"); settings["file_log_enabled"] = $("filelog_checkbox").getProperty("checked");
settings["file_log_path"] = $("filelog_save_path_input").getProperty("value"); settings["file_log_path"] = $("filelog_save_path_input").getProperty("value");
settings["file_log_backup_enabled"] = $("filelog_backup_checkbox").getProperty("checked"); settings["file_log_backup_enabled"] = $("filelog_backup_checkbox").getProperty("checked");
@ -2712,10 +2744,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
settings["rss_smart_episode_filters"] = $("rss_filter_textarea").getProperty("value"); settings["rss_smart_episode_filters"] = $("rss_filter_textarea").getProperty("value");
// WebUI tab // WebUI tab
// Language
settings["locale"] = $("locale_select").getProperty("value");
settings["performance_warning"] = $("performanceWarning").getProperty("checked");
// HTTP Server // HTTP Server
settings["web_ui_domain_list"] = $("webui_domain_textarea").getProperty("value"); settings["web_ui_domain_list"] = $("webui_domain_textarea").getProperty("value");
const web_ui_address = $("webui_address_value").getProperty("value").toString(); const web_ui_address = $("webui_address_value").getProperty("value").toString();