qbittorrent/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2024-11-26 19:20:32 +00:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Merge pull request #21613 from sledgehammer999/webui_color_switcher

Browse Source 
WebUI: Add color scheme switcher
This commit is contained in:
sledgehammer999 2024-11-02 16:30:01 +02:00 committed by GitHub
commit 0771970627
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 59 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/webui/www/private/css/style.css
View File

@ -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 {
&:not(.dark) {
color-scheme: light;
}
}
/* Dark corrections */
@media (prefers-color-scheme: dark) {
:root {
&.dark {
--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%)
hue-rotate(156deg) brightness(106%) contrast(101%);
#rssButtonBar img,
#startSearchButton img,
#manageSearchPlugins img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
saturate(1%) hue-rotate(156deg) brightness(106%) contrast(101%);
}
}
}

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

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

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

@ -1738,6 +1738,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) {

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

@ -7,6 +7,16 @@
</select>
</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">
<legend>QBT_TR(Transfer list)QBT_TR[CONTEXT=OptionsDialog]</legend>
<div class="formRow" style="margin-bottom: 3px;" title="QBT_TR(Shows a confirmation dialog upon torrent deletion)QBT_TR[CONTEXT=OptionsDialog]">
@ -2128,10 +2138,26 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
$("locale_select").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 = () => {
window.parent.qBittorrent.Cache.preferences.init({
onSuccess: (pref) => {
// Behavior tab
// Language
updateWebuiLocaleSelect(pref.locale);
updateColoSchemeSelect();
$("performanceWarning").checked = pref.performance_warning;
document.getElementById("displayFullURLTrackerColumn").checked = (LocalPreferences.get("full_url_tracker_column", "false") === "true");
document.getElementById("hideZeroFiltersCheckbox").checked = (LocalPreferences.get("hide_zero_status_filters", "false") === "true");
$("dblclickDownloadSelect").value = LocalPreferences.get("dblclick_download", "1");
@ -2417,10 +2443,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
$("rss_filter_textarea").value = pref.rss_smart_episode_filters;
// WebUI tab
// Language
updateWebuiLocaleSelect(pref.locale);
$("performanceWarning").checked = pref.performance_warning;
// HTTP Server
$("webui_domain_textarea").value = pref.web_ui_domain_list;
$("webui_address_value").value = pref.web_ui_address;
@ -2551,6 +2573,16 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
// Validate form data
// Behavior tab
// Language
settings["locale"] = $("locale_select").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").checked;
LocalPreferences.set("full_url_tracker_column", document.getElementById("displayFullURLTrackerColumn").checked.toString());
LocalPreferences.set("hide_zero_status_filters", document.getElementById("hideZeroFiltersCheckbox").checked.toString());
LocalPreferences.set("dblclick_download", $("dblclickDownloadSelect").value);
@ -2843,10 +2875,6 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
settings["rss_smart_episode_filters"] = $("rss_filter_textarea").value;
// WebUI tab
// Language
settings["locale"] = $("locale_select").value;
settings["performance_warning"] = $("performanceWarning").checked;
// HTTP Server
settings["web_ui_domain_list"] = $("webui_domain_textarea").value;
const web_ui_address = $("webui_address_value").value.toString();