From da84bcd28f7a8ece2783840d284f190f4d2a589c Mon Sep 17 00:00:00 2001 From: Damjan Antevski Date: Sat, 8 Aug 2026 09:30:21 +0200 Subject: [PATCH] feat(theme): add color customization for UI inputs and controls --- README.md | 2 ++ theme.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 59 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 5a38153..5227b48 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,8 @@ Type `help` in the SpoTUI command bar to see a list of available commands. | `tui -bar off` | Reset player bar colors | | `tui -progress -bg <#hex> -fg <#hex>` | Set progress bar colors | | `tui -progress off` | Reset progress bar colors | +| `tui -inputs -bg <#hex> -bg-hover <#hex> -text <#hex> -border <#hex>` | Set input colors | +| `tui -inputs off` | Reset input colors | | `playlist` / `list` | Open playlist viewer | | `play` / `pause` / `p` | Toggle playback | | `skip` | Next track | diff --git a/theme.js b/theme.js index 09e2ee8..dce0110 100644 --- a/theme.js +++ b/theme.js @@ -166,7 +166,7 @@ body.spotui-cli-mode #spotui-output { gap: 12px; padding-top: 12px; margin-top: auto; - border-top: 1px solid rgba(255, 140, 66, 0.18); + border-top: 1px solid var(--input-border-color, rgba(255, 140, 66, 0.18)); position: relative; z-index: 1; transition: opacity 260ms ease, transform 260ms ease; @@ -176,14 +176,14 @@ body.spotui-cli-mode #spotui-output { background: transparent; border: none; outline: none; - color: #ff8c42; + color: var(--input-text-color, #ff8c42); font-family: inherit; font-size: inherit; flex: 1 1 auto; min-width: 0; } -.prompt { color: #ff8c42; } +.prompt { color: var(--input-text-color, #ff8c42); } .cl-line, .result { margin-bottom: 8px; user-select: text; } .result { padding: 5px; } .selected { background: #ff8c42; color: #000; } @@ -485,8 +485,8 @@ body.spotui-theme-panel #spotui-theme-panel { } .spotui-control-btn { - background: #ff8c42; - color: #000; + background: var(--input-bg-color, #ff8c42); + color: var(--input-text-color, #000); border: none; padding: 6px 12px; font-family: "JetBrains Mono", monospace; @@ -496,7 +496,7 @@ body.spotui-theme-panel #spotui-theme-panel { } .spotui-control-btn:hover { - background: #e07b39; + background: var(--input-bg-hover-color, #e07b39); } body.spotui-tui-hidden #spotui-tui { @@ -1065,6 +1065,30 @@ function applyProgressBarColors() { } } +function applyInputColors() { + try { + const bg = localStorage.getItem(INPUT_BG); + const bgHover = localStorage.getItem(INPUT_BG_HOVER); + const text = localStorage.getItem(INPUT_TEXT); + const border = localStorage.getItem(INPUT_BORDER); + + const root = document.documentElement; + if (bg) root.style.setProperty("--input-bg-color", bg); + else root.style.removeProperty("--input-bg-color"); + + if (bgHover) root.style.setProperty("--input-bg-hover-color", bgHover); + else root.style.removeProperty("--input-bg-hover-color"); + + if (text) root.style.setProperty("--input-text-color", text); + else root.style.removeProperty("--input-text-color"); + + if (border) root.style.setProperty("--input-border-color", border); + else root.style.removeProperty("--input-border-color"); + } catch (e) { + console.error("SpoTUI: Failed to apply input colors", e); + } +} + function setTuiMode(mode) { tuiMode = mode === "cli" ? "cli" : "command"; document.body.classList.toggle("spotui-cli-mode", tuiMode === "cli"); @@ -1346,6 +1370,26 @@ async function execute(cmd) { applyProgressBarColors(); return; } + if (args.includes("-inputs")) { + if (args.includes("off")) { + localStorage.removeItem(INPUT_BG); + localStorage.removeItem(INPUT_BG_HOVER); + localStorage.removeItem(INPUT_TEXT); + localStorage.removeItem(INPUT_BORDER); + } else { + const bgIndex = args.indexOf("-bg"); + const bgHoverIndex = args.indexOf("-bg-hover"); + const textIndex = args.indexOf("-text"); + const borderIndex = args.indexOf("-border"); + + if (bgIndex !== -1) localStorage.setItem(INPUT_BG, args[bgIndex + 1]); + if (bgHoverIndex !== -1) localStorage.setItem(INPUT_BG_HOVER, args[bgHoverIndex + 1]); + if (textIndex !== -1) localStorage.setItem(INPUT_TEXT, args[textIndex + 1]); + if (borderIndex !== -1) localStorage.setItem(INPUT_BORDER, args[borderIndex + 1]); + } + applyInputColors(); + return; + } if (args.includes("-l") || args.includes("-a")) { const state = args[args.length - 1]; if (state === "off") { @@ -1445,6 +1489,8 @@ const COMMAND_LIST = [ { cmd: "tui -bar off", desc: "Reset player bar colors" }, { cmd: "tui -progress -bg <#hex> -fg <#hex>", desc: "Set progress bar colors" }, { cmd: "tui -progress off", desc: "Reset progress bar colors" }, + { cmd: "tui -inputs -bg <#hex> -bg-hover <#hex> -text <#hex> -border <#hex>", desc: "Set input colors" }, + { cmd: "tui -inputs off", desc: "Reset input colors" }, { cmd: "playlist / list", desc: "Open playlist viewer" }, { cmd: "play / pause / p", desc: "Toggle playback" }, { cmd: "skip", desc: "Next track" }, @@ -1853,6 +1899,10 @@ const PLAYER_BAR_BORDER = "spotui:player-bar-border"; const PLAYER_BAR_TEXT = "spotui:player-bar-text"; const PROGRESS_BAR_BG = "spotui:progress-bar-bg"; const PROGRESS_BAR_FG = "spotui:progress-bar-fg"; +const INPUT_BG = "spotui:input-bg"; +const INPUT_BG_HOVER = "spotui:input-bg-hover"; +const INPUT_TEXT = "spotui:input-text"; +const INPUT_BORDER = "spotui:input-border"; let lyricsPanelOpen = false; let lyricsLoadToken = 0; @@ -2190,6 +2240,7 @@ try { applyLyricColors(); applyPlayerBarColors(); applyProgressBarColors(); + applyInputColors(); } catch { } })();