feat: theme
This commit is contained in:
kodi
+73
-29
@@ -57,47 +57,51 @@ let settingsState = {
|
||||
showThumbnails: false,
|
||||
preferredStartupPathLeft: null,
|
||||
preferredStartupPathRight: null,
|
||||
selectedTheme: "default",
|
||||
selectedColorMode: "dark",
|
||||
};
|
||||
let searchState = {
|
||||
pane: "left",
|
||||
path: "/Volumes",
|
||||
query: "",
|
||||
};
|
||||
const THEME_STORAGE_KEY = "webmanager-theme";
|
||||
|
||||
function preferredTheme() {
|
||||
const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
|
||||
if (stored === "light" || stored === "dark") {
|
||||
return stored;
|
||||
}
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
|
||||
return "light";
|
||||
}
|
||||
return "dark";
|
||||
function effectiveThemeKey(theme, colorMode) {
|
||||
const family = theme === "default" ? "default" : "default";
|
||||
const mode = colorMode === "light" ? "light" : "dark";
|
||||
return `${family}-${mode}`;
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
const nextTheme = theme === "light" ? "light" : "dark";
|
||||
function currentColorMode() {
|
||||
return (document.documentElement.dataset.theme || "").endsWith("-light") ? "light" : "dark";
|
||||
}
|
||||
|
||||
function applyTheme(theme, colorMode) {
|
||||
const nextTheme = effectiveThemeKey(theme, colorMode);
|
||||
const mode = colorMode === "light" ? "light" : "dark";
|
||||
document.documentElement.dataset.theme = nextTheme;
|
||||
const icon = document.getElementById("theme-toggle-icon");
|
||||
const button = document.getElementById("theme-toggle");
|
||||
if (icon) {
|
||||
icon.textContent = nextTheme === "dark" ? "☾" : "☀";
|
||||
icon.textContent = mode === "dark" ? "☾" : "☀";
|
||||
}
|
||||
if (button) {
|
||||
button.setAttribute("aria-label", `Switch to ${nextTheme === "dark" ? "light" : "dark"} mode`);
|
||||
button.setAttribute("title", `Switch to ${nextTheme === "dark" ? "light" : "dark"} mode`);
|
||||
button.setAttribute("aria-label", `Switch to ${mode === "dark" ? "light" : "dark"} mode`);
|
||||
button.setAttribute("title", `Switch to ${mode === "dark" ? "light" : "dark"} mode`);
|
||||
}
|
||||
if (monacoState.module) {
|
||||
monacoState.module.editor.setTheme(nextTheme === "light" ? "vs" : "vs-dark");
|
||||
monacoState.module.editor.setTheme(mode === "light" ? "vs" : "vs-dark");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const current = document.documentElement.dataset.theme === "light" ? "light" : "dark";
|
||||
async function toggleTheme() {
|
||||
const current = settingsState.selectedColorMode === "light" ? "light" : "dark";
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
applyTheme(next);
|
||||
window.localStorage.setItem(THEME_STORAGE_KEY, next);
|
||||
try {
|
||||
const data = await saveSettings({ selected_color_mode: next });
|
||||
applyTheme(data.selected_theme, data.selected_color_mode);
|
||||
} catch (err) {
|
||||
setError("actions-error", `Theme: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function paneState(pane) {
|
||||
@@ -223,13 +227,18 @@ function settingsElements() {
|
||||
overlay: document.getElementById("settings-modal"),
|
||||
closeButton: document.getElementById("settings-close-btn"),
|
||||
generalTab: document.getElementById("settings-general-tab"),
|
||||
interfaceTab: document.getElementById("settings-interface-tab"),
|
||||
logsTab: document.getElementById("settings-logs-tab"),
|
||||
generalPanel: document.getElementById("settings-general-panel"),
|
||||
interfacePanel: document.getElementById("settings-interface-panel"),
|
||||
showThumbnailsInput: document.getElementById("settings-show-thumbnails"),
|
||||
startupPathLeftInput: document.getElementById("settings-startup-path-left"),
|
||||
startupPathRightInput: document.getElementById("settings-startup-path-right"),
|
||||
generalError: document.getElementById("settings-general-error"),
|
||||
generalSaveButton: document.getElementById("settings-general-save-btn"),
|
||||
selectedThemeInput: document.getElementById("settings-selected-theme"),
|
||||
interfaceError: document.getElementById("settings-interface-error"),
|
||||
interfaceSaveButton: document.getElementById("settings-interface-save-btn"),
|
||||
logsPanel: document.getElementById("settings-logs-panel"),
|
||||
logsList: document.getElementById("settings-logs-list"),
|
||||
logsError: document.getElementById("settings-logs-error"),
|
||||
@@ -507,6 +516,8 @@ async function loadSettings() {
|
||||
settingsState.showThumbnails = !!data.show_thumbnails;
|
||||
settingsState.preferredStartupPathLeft = data.preferred_startup_path_left || null;
|
||||
settingsState.preferredStartupPathRight = data.preferred_startup_path_right || null;
|
||||
settingsState.selectedTheme = data.selected_theme || "default";
|
||||
settingsState.selectedColorMode = data.selected_color_mode || "dark";
|
||||
const elements = settingsElements();
|
||||
if (elements.showThumbnailsInput) {
|
||||
elements.showThumbnailsInput.checked = settingsState.showThumbnails;
|
||||
@@ -517,6 +528,9 @@ async function loadSettings() {
|
||||
if (elements.startupPathRightInput) {
|
||||
elements.startupPathRightInput.value = settingsState.preferredStartupPathRight || "";
|
||||
}
|
||||
if (elements.selectedThemeInput) {
|
||||
elements.selectedThemeInput.value = settingsState.selectedTheme;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSettings(update) {
|
||||
@@ -524,6 +538,8 @@ async function saveSettings(update) {
|
||||
settingsState.showThumbnails = !!data.show_thumbnails;
|
||||
settingsState.preferredStartupPathLeft = data.preferred_startup_path_left || null;
|
||||
settingsState.preferredStartupPathRight = data.preferred_startup_path_right || null;
|
||||
settingsState.selectedTheme = data.selected_theme || "default";
|
||||
settingsState.selectedColorMode = data.selected_color_mode || "dark";
|
||||
const elements = settingsElements();
|
||||
if (elements.showThumbnailsInput) {
|
||||
elements.showThumbnailsInput.checked = settingsState.showThumbnails;
|
||||
@@ -534,6 +550,10 @@ async function saveSettings(update) {
|
||||
if (elements.startupPathRightInput) {
|
||||
elements.startupPathRightInput.value = settingsState.preferredStartupPathRight || "";
|
||||
}
|
||||
if (elements.selectedThemeInput) {
|
||||
elements.selectedThemeInput.value = settingsState.selectedTheme;
|
||||
}
|
||||
applyTheme(settingsState.selectedTheme, settingsState.selectedColorMode);
|
||||
renderPaneItems("left");
|
||||
renderPaneItems("right");
|
||||
return data;
|
||||
@@ -1323,7 +1343,7 @@ async function loadMonacoModule() {
|
||||
monacoState.loadPromise = import("https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/+esm")
|
||||
.then((module) => {
|
||||
monacoState.module = module;
|
||||
module.editor.setTheme(document.documentElement.dataset.theme === "light" ? "vs" : "vs-dark");
|
||||
module.editor.setTheme(currentColorMode() === "light" ? "vs" : "vs-dark");
|
||||
return module;
|
||||
});
|
||||
}
|
||||
@@ -1359,7 +1379,7 @@ async function ensureMonacoEditor(path, content) {
|
||||
const model = monaco.editor.createModel(content, monacoLanguageForName(baseName(path)));
|
||||
const instance = monaco.editor.create(editor.host, {
|
||||
model,
|
||||
theme: document.documentElement.dataset.theme === "light" ? "vs" : "vs-dark",
|
||||
theme: currentColorMode() === "light" ? "vs" : "vs-dark",
|
||||
language: monacoLanguageForName(baseName(path)),
|
||||
automaticLayout: false,
|
||||
lineNumbers: "on",
|
||||
@@ -1868,14 +1888,19 @@ async function submitSearch() {
|
||||
|
||||
function setSettingsTab(tab) {
|
||||
const elements = settingsElements();
|
||||
settingsState.activeTab = tab === "logs" ? "logs" : "general";
|
||||
settingsState.activeTab = tab === "logs" ? "logs" : (tab === "interface" ? "interface" : "general");
|
||||
const isGeneral = settingsState.activeTab === "general";
|
||||
const isInterface = settingsState.activeTab === "interface";
|
||||
const isLogs = settingsState.activeTab === "logs";
|
||||
elements.generalTab.classList.toggle("is-active", isGeneral);
|
||||
elements.generalTab.setAttribute("aria-selected", isGeneral ? "true" : "false");
|
||||
elements.logsTab.classList.toggle("is-active", !isGeneral);
|
||||
elements.logsTab.setAttribute("aria-selected", !isGeneral ? "true" : "false");
|
||||
elements.interfaceTab.classList.toggle("is-active", isInterface);
|
||||
elements.interfaceTab.setAttribute("aria-selected", isInterface ? "true" : "false");
|
||||
elements.logsTab.classList.toggle("is-active", isLogs);
|
||||
elements.logsTab.setAttribute("aria-selected", isLogs ? "true" : "false");
|
||||
elements.generalPanel.classList.toggle("hidden", !isGeneral);
|
||||
elements.logsPanel.classList.toggle("hidden", isGeneral);
|
||||
elements.interfacePanel.classList.toggle("hidden", !isInterface);
|
||||
elements.logsPanel.classList.toggle("hidden", !isLogs);
|
||||
}
|
||||
|
||||
function formatHistoryLine(item) {
|
||||
@@ -1965,6 +1990,18 @@ async function handlePreferredStartupPathSave() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInterfaceSave() {
|
||||
const settings = settingsElements();
|
||||
const themeValue = settings.selectedThemeInput ? settings.selectedThemeInput.value : "default";
|
||||
settings.interfaceError.textContent = "";
|
||||
try {
|
||||
await saveSettings({ selected_theme: themeValue });
|
||||
setStatus("Theme saved");
|
||||
} catch (err) {
|
||||
settings.interfaceError.textContent = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
function closeSettings() {
|
||||
settingsElements().overlay.classList.add("hidden");
|
||||
}
|
||||
@@ -1977,7 +2014,11 @@ async function openSettings(tab = "general") {
|
||||
if (settingsState.activeTab === "logs") {
|
||||
await loadHistoryForSettings();
|
||||
}
|
||||
(settingsState.activeTab === "logs" ? elements.logsTab : elements.generalTab).focus();
|
||||
(settingsState.activeTab === "logs"
|
||||
? elements.logsTab
|
||||
: settingsState.activeTab === "interface"
|
||||
? elements.interfaceTab
|
||||
: elements.generalTab).focus();
|
||||
}
|
||||
|
||||
function editorIsDirty() {
|
||||
@@ -2469,12 +2510,14 @@ function setupEvents() {
|
||||
const settings = settingsElements();
|
||||
settings.closeButton.onclick = closeSettings;
|
||||
settings.generalTab.onclick = () => setSettingsTab("general");
|
||||
settings.interfaceTab.onclick = () => setSettingsTab("interface");
|
||||
settings.logsTab.onclick = async () => {
|
||||
setSettingsTab("logs");
|
||||
await loadHistoryForSettings();
|
||||
};
|
||||
settings.showThumbnailsInput.onchange = handleShowThumbnailsChange;
|
||||
settings.generalSaveButton.onclick = handlePreferredStartupPathSave;
|
||||
settings.interfaceSaveButton.onclick = handleInterfaceSave;
|
||||
settings.overlay.onclick = (event) => {
|
||||
if (event.target === settings.overlay) {
|
||||
closeSettings();
|
||||
@@ -2582,10 +2625,11 @@ function setupEvents() {
|
||||
|
||||
async function init() {
|
||||
setError("actions-error", "");
|
||||
applyTheme(preferredTheme());
|
||||
applyTheme("default", "dark");
|
||||
setActivePane("left");
|
||||
setupEvents();
|
||||
await loadSettings();
|
||||
applyTheme(settingsState.selectedTheme, settingsState.selectedColorMode);
|
||||
paneState("left").currentPath = settingsState.preferredStartupPathLeft || "/Volumes";
|
||||
paneState("right").currentPath = settingsState.preferredStartupPathRight || "/Volumes";
|
||||
await loadBrowsePane("left");
|
||||
|
||||
Reference in New Issue
Block a user