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

[fix](trx-frontend-http): force style recalc before reading bookmark theme colors

Browse Source 
getComputedStyle may return stale CSS variable values if the browser
has not flushed the style recalculation after changing data-theme. Force
a recalc by reading a property value first. Also clear cached bookmark
DOM keys so the next draw pass rebuilds chips from scratch.

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 09:42:41 +01:00
parent 2d1f635019
commit f9f06a1db1
1 changed files with 22 additions and 12 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
+22 -12
View File
@@ -631,20 +631,30 @@ function setTheme(theme) {
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. // Invalidate cached bookmark chip colours so they pick up the new theme palette.
// 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") { if (typeof bmRevision !== "undefined") {
bmRevision++; bmRevision++;
// Re-apply colours to existing bookmark chips using the new palette. // Force the browser to recalculate styles after the data-theme attribute
try { // change so that getComputedStyle returns the new CSS variable values.
const colorMap = bmCategoryColorMap(); void getComputedStyle(document.documentElement).getPropertyValue("--bg");
const ref = typeof bmList !== "undefined" ? bmList : []; const colorMap = bmCategoryColorMap();
document.querySelectorAll(".spectrum-bookmark-chip").forEach((chip) => { const ref = typeof bmList !== "undefined" ? bmList : [];
const bm = ref.find((b) => b.id === chip.dataset.bmId); const fallback = "#66d9ef";
if (!bm) return; document.querySelectorAll(".spectrum-bookmark-chip").forEach((chip) => {
const col = colorMap[bm.category || ""] || BOOKMARK_MARKER_FALLBACK; const bm = ref.find((b) => b.id === chip.dataset.bmId);
chip.style.setProperty("--bm-cat-bg", col); if (!bm) return;
chip.style.setProperty("--bm-cat-fg", bmContrastFg(col)); const col = colorMap[bm.category || ""] || fallback;
}); chip.style.setProperty("--bm-cat-bg", col);
} catch (_) {} chip.style.setProperty("--bm-cat-fg", bmContrastFg(col));
});
// Also clear cached DOM keys so the next spectrum draw rebuilds chips fresh.
const axisEl = document.getElementById("spectrum-bookmark-axis");
const leftEl = document.getElementById("spectrum-bookmark-side-left");
const rightEl = document.getElementById("spectrum-bookmark-side-right");
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 (_) {}
} }