sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): invalidate bookmark colors on style change too

Browse Source 
The bookmark color palette is derived from CSS variables (--accent-yellow,
--accent-green, etc.) which change on both dark/light theme toggle AND
palette style change (arctic, lime, etc.). The previous fix only covered
setTheme; extract invalidateBookmarkColors() and call it from setStyle
as well so bookmark chips recolour on any visual change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-22 12:12:09 +01:00
parent f9f06a1db1
commit 01a6b331f6
1 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+23 -26
View File
@@ -630,31 +630,28 @@ function setTheme(theme) {
themeToggleBtn.textContent = next === "dark" ? "☀️ Light" : "🌙 Dark"; themeToggleBtn.textContent = next === "dark" ? "☀️ Light" : "🌙 Dark";
themeToggleBtn.title = next === "dark" ? "Switch to light mode" : "Switch to dark mode"; themeToggleBtn.title = next === "dark" ? "Switch to light mode" : "Switch to dark mode";
} }
// Invalidate cached bookmark chip colours so they pick up the new theme palette. invalidateBookmarkColors();
// Guard: bmRevision (var in bookmarks.js) may not exist during the initial }
// setTheme() call at load time (bookmarks.js loads after app.js).
if (typeof bmRevision !== "undefined") { // Recolour bookmark chips after any palette/theme change (setTheme or setStyle).
bmRevision++; function invalidateBookmarkColors() {
// Force the browser to recalculate styles after the data-theme attribute if (typeof bmRevision === "undefined") return;
// change so that getComputedStyle returns the new CSS variable values. bmRevision++;
void getComputedStyle(document.documentElement).getPropertyValue("--bg"); // Force the browser to recalculate styles so getComputedStyle reads new values.
const colorMap = bmCategoryColorMap(); void getComputedStyle(document.documentElement).getPropertyValue("--bg");
const ref = typeof bmList !== "undefined" ? bmList : []; const colorMap = bmCategoryColorMap();
const fallback = "#66d9ef"; const ref = typeof bmList !== "undefined" ? bmList : [];
document.querySelectorAll(".spectrum-bookmark-chip").forEach((chip) => { document.querySelectorAll(".spectrum-bookmark-chip").forEach((chip) => {
const bm = ref.find((b) => b.id === chip.dataset.bmId); const bm = ref.find((b) => b.id === chip.dataset.bmId);
if (!bm) return; if (!bm) return;
const col = colorMap[bm.category || ""] || fallback; const col = colorMap[bm.category || ""] || "#66d9ef";
chip.style.setProperty("--bm-cat-bg", col); chip.style.setProperty("--bm-cat-bg", col);
chip.style.setProperty("--bm-cat-fg", bmContrastFg(col)); chip.style.setProperty("--bm-cat-fg", bmContrastFg(col));
}); });
// Also clear cached DOM keys so the next spectrum draw rebuilds chips fresh. // Clear cached DOM keys so the next spectrum draw rebuilds chips fresh.
const axisEl = document.getElementById("spectrum-bookmark-axis"); for (const id of ["spectrum-bookmark-axis", "spectrum-bookmark-side-left", "spectrum-bookmark-side-right"]) {
const leftEl = document.getElementById("spectrum-bookmark-side-left"); const el = document.getElementById(id);
const rightEl = document.getElementById("spectrum-bookmark-side-right"); if (el) el.dataset.bmKey = "";
if (axisEl) axisEl.dataset.bmKey = "";
if (leftEl) leftEl.dataset.bmKey = "";
if (rightEl) rightEl.dataset.bmKey = "";
} }
try { if (typeof scheduleSpectrumDraw === "function") scheduleSpectrumDraw(); } catch (_) {} try { if (typeof scheduleSpectrumDraw === "function") scheduleSpectrumDraw(); } catch (_) {}
} }
@@ -850,8 +847,8 @@ function setStyle(style) {
} }
saveSetting("style", next); saveSetting("style", next);
if (headerStylePickSelect) headerStylePickSelect.value = next; if (headerStylePickSelect) headerStylePickSelect.value = next;
invalidateBookmarkColors();
scheduleOverviewDraw(); scheduleOverviewDraw();
if (typeof scheduleSpectrumDraw === "function" && lastSpectrumData) scheduleSpectrumDraw();
} }
if (overviewPeakHoldEl) { if (overviewPeakHoldEl) {