kodi/webmanager-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: theme - 01

Browse Source
This commit is contained in:
kodi
2026-03-12 18:49:13 +01:00
parent ab83ee3f20
commit 09c3e14dea
17 changed files with 852 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/app.js
+14 -9
View File
@@ -60,24 +60,29 @@ let settingsState = {
selectedTheme: "default",
selectedColorMode: "dark",
};
const VALID_THEME_FAMILIES = ["default", "macos-soft", "midnight", "graphite", "windows11"];
const VALID_COLOR_MODES = ["dark", "light"];
let searchState = {
pane: "left",
path: "/Volumes",
query: "",
};
function effectiveThemeKey(theme, colorMode) {
const family = theme === "default" ? "default" : "default";
const mode = colorMode === "light" ? "light" : "dark";
const family = VALID_THEME_FAMILIES.includes(theme) ? theme : "default";
const mode = VALID_COLOR_MODES.includes(colorMode) ? colorMode : "dark";
return `${family}-${mode}`;
}
function currentColorMode() {
return (document.documentElement.dataset.theme || "").endsWith("-light") ? "light" : "dark";
return document.documentElement.dataset.colorMode === "light" ? "light" : "dark";
}
function applyTheme(theme, colorMode) {
const nextTheme = effectiveThemeKey(theme, colorMode);
const mode = colorMode === "light" ? "light" : "dark";
const family = VALID_THEME_FAMILIES.includes(theme) ? theme : "default";
const mode = VALID_COLOR_MODES.includes(colorMode) ? colorMode : "dark";
const nextTheme = effectiveThemeKey(family, mode);
document.documentElement.dataset.themeFamily = family;
document.documentElement.dataset.colorMode = mode;
document.documentElement.dataset.theme = nextTheme;
const icon = document.getElementById("theme-toggle-icon");
const button = document.getElementById("theme-toggle");
@@ -516,8 +521,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";
settingsState.selectedTheme = VALID_THEME_FAMILIES.includes(data.selected_theme) ? data.selected_theme : "default";
settingsState.selectedColorMode = VALID_COLOR_MODES.includes(data.selected_color_mode) ? data.selected_color_mode : "dark";
const elements = settingsElements();
if (elements.showThumbnailsInput) {
elements.showThumbnailsInput.checked = settingsState.showThumbnails;
@@ -538,8 +543,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";
settingsState.selectedTheme = VALID_THEME_FAMILIES.includes(data.selected_theme) ? data.selected_theme : "default";
settingsState.selectedColorMode = VALID_COLOR_MODES.includes(data.selected_color_mode) ? data.selected_color_mode : "dark";
const elements = settingsElements();
if (elements.showThumbnailsInput) {
elements.showThumbnailsInput.checked = settingsState.showThumbnails;