mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2024-11-28 21:38:51 +03:00
parent
94136262a8
commit
84ee620fdc
4 changed files with 50 additions and 18 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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,6 +2021,18 @@ 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) => {
|
||||||
|
@ -2296,6 +2318,7 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
|
||||||
// WebUI tab
|
// WebUI tab
|
||||||
// Language
|
// Language
|
||||||
updateWebuiLocaleSelect(pref.locale);
|
updateWebuiLocaleSelect(pref.locale);
|
||||||
|
updateColoSchemeSelect();
|
||||||
$("performanceWarning").setProperty("checked", pref.performance_warning);
|
$("performanceWarning").setProperty("checked", pref.performance_warning);
|
||||||
|
|
||||||
// HTTP Server
|
// HTTP Server
|
||||||
|
@ -2714,6 +2737,13 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
|
||||||
// WebUI tab
|
// WebUI tab
|
||||||
// Language
|
// Language
|
||||||
settings["locale"] = $("locale_select").getProperty("value");
|
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["performance_warning"] = $("performanceWarning").getProperty("checked");
|
||||||
|
|
||||||
// HTTP Server
|
// HTTP Server
|
||||||
|
|
Loading…
Reference in a new issue