Sync theme live across dashboard, panel, and settings

Author: baboonzero

README.md

@@ -17,7 +17,7 @@ For complete project history, architecture decisions, execution timeline, built/
 - Time range filters: `1h`, `4h`, `24h`, `7d`
 - Global side panel UI (dark mode default) with:
   - Search
-  - Theme toggle (shared with full dashboard)
+  - Theme toggle (shared with full dashboard, live sync across open views)
   - `Expand` to full dashboard tab
 - Click any entry to focus an existing tab or open it if already closed.
 - Local-only storage (IndexedDB), no cloud sync.

background/service-worker.js

@@ -49,6 +49,12 @@ function getSettingsUrl() {
   return chrome.runtime.getURL("ui/settings.html");
 }
 
+function broadcastTheme(theme) {
+  chrome.runtime.sendMessage({ type: "theme-changed", theme }).catch(() => {
+    // Ignore when no extension page is listening.
+  });
+}
+
 function getSenderWindowId(sender) {
   return typeof sender?.tab?.windowId === "number" ? sender.tab.windowId : null;
 }
@@ -536,6 +542,7 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
         } else {
           await syncCurrentActiveContext("settings_updated");
         }
+        broadcastTheme(state.theme);
         sendResponse({ ok: true });
       })
       .catch((error) => {
@@ -549,6 +556,7 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
     updateSettings({ theme: message.theme })
       .then(async (settings) => {
         state.theme = settings.theme;
+        broadcastTheme(settings.theme);
         sendResponse({ ok: true, theme: settings.theme });
       })
       .catch((error) => sendResponse({ ok: false, error: String(error) }));

project-history.md

@@ -192,6 +192,14 @@ Chronological execution log:
     - updated dashboard/panel/settings favicon links and header icon references
     - extended smoke assertions to require `icon-v2-32.png` favicon path in both dashboard and settings
 
+34. Fixed cross-surface live theme sync regression:
+    - added runtime theme broadcast (`theme-changed`) from service worker on `set-theme` and `settings-updated`
+    - added listeners in dashboard/panel and settings pages to apply incoming theme updates live
+    - synchronized settings dropdown value with runtime theme updates
+    - expanded tests:
+      - e2e runtime broadcast tests for dashboard and settings
+      - smoke assertions for two-way live sync (`dashboard -> panel` and `panel -> dashboard/settings`)
+
 ## 4. What Were The Decisions That We Took?
 
 ### Product/Architecture Decisions
@@ -306,6 +314,7 @@ Not in MVP (intentionally out of scope):
 - `npm run test:all`: passing
 - `npm run test:smoke:extension`: passing
 - `npm run test:flows:extension`: passing (`18/18` transition sequences)
+- Cross-surface live theme sync check: passing (`dashboard->panel`, `panel->dashboard/settings`)
 - Long-duration headed validation: passing (`runId=20260226-192909`, `allTabsCount=6`, `neverFocused=4`, `retentionDays=30`, `theme=dark`)
 - Action-click config check: passing (`sidePanelApiAvailable=true`, `openPanelOnActionClick=true`)
 

scripts/extension-smoke-test.mjs

@@ -30,6 +30,7 @@ async function run() {
     const dashboardPage = await context.newPage();
     await dashboardPage.goto(dashboardUrl, { waitUntil: "domcontentloaded" });
     const dashboardFaviconHref = await dashboardPage.getAttribute('link[rel="icon"]', "href");
+    const dashboardThemeInitial = await dashboardPage.getAttribute("body", "data-theme");
 
     const heading = await dashboardPage.textContent("h1");
     const activityListCount = await dashboardPage.locator("#activity-list").count();
@@ -44,6 +45,7 @@ async function run() {
     const panelPage = await context.newPage();
     await panelPage.goto(panelUrl, { waitUntil: "domcontentloaded" });
     const panelViewCount = await panelPage.locator('[data-view]').count();
+    const panelThemeInitial = await panelPage.getAttribute("body", "data-theme");
     const initialPageCount = context.pages().length;
 
     await dashboardPage.click("#open-side-panel");
@@ -55,6 +57,8 @@ async function run() {
     await dashboardPage.click("#theme-toggle");
     await dashboardPage.waitForTimeout(250);
     const dashboardThemeAfterToggle = await dashboardPage.getAttribute("body", "data-theme");
+    await panelPage.waitForFunction(() => document.body?.dataset?.theme === "light", null, { timeout: 5_000 });
+    const panelThemeAfterDashboardToggle = await panelPage.getAttribute("body", "data-theme");
 
     await dashboardPage.click("#open-settings");
     await dashboardPage.waitForURL((url) => url.toString().endsWith("/ui/settings.html"), { timeout: 5_000 });
@@ -74,12 +78,18 @@ async function run() {
     const dashboardOpenedInCurrentTab = dashboardPage.url().endsWith("/ui/dashboard.html");
     const pageCountAfterBackToDashboard = context.pages().length;
 
+    await panelPage.click("#theme-toggle");
+    await panelPage.waitForTimeout(250);
+    const panelThemeAfterPanelToggle = await panelPage.getAttribute("body", "data-theme");
+    await dashboardPage.waitForFunction(() => document.body?.dataset?.theme === "dark", null, { timeout: 5_000 });
+    const dashboardThemeAfterPanelToggle = await dashboardPage.getAttribute("body", "data-theme");
+
     await dashboardPage.click("#open-settings");
     await dashboardPage.waitForURL((url) => url.toString().endsWith("/ui/settings.html"), { timeout: 5_000 });
     await dashboardPage.waitForFunction(
       () =>
-        document.body?.dataset?.theme === "light" &&
-        document.querySelector("#theme")?.value === "light",
+        document.body?.dataset?.theme === "dark" &&
+        document.querySelector("#theme")?.value === "dark",
       null,
       { timeout: 5_000 }
     );
@@ -133,6 +143,11 @@ async function run() {
       paused: status?.paused,
       sidePanelApiAvailable: status?.sidePanelApiAvailable,
       openPanelOnActionClick: status?.openPanelOnActionClick,
+      dashboardThemeInitial,
+      panelThemeInitial,
+      panelThemeAfterDashboardToggle,
+      panelThemeAfterPanelToggle,
+      dashboardThemeAfterPanelToggle,
       runtimeAfterDashboardSidePanel,
       runtimeAfterSettingsSidePanel,
       dashboardFaviconHref,
@@ -171,9 +186,14 @@ async function run() {
       result.settingsOpenedInCurrentTab !== true ||
       result.dashboardOpenedInCurrentTab !== true ||
       result.pageCountUnchangedOnSettingsRoundTrip !== true ||
+      result.dashboardThemeInitial !== "dark" ||
+      result.panelThemeInitial !== "dark" ||
       result.dashboardThemeAfterToggle !== "light" ||
-      result.settingsTheme !== "light" ||
-      result.settingsThemeValue !== "light" ||
+      result.panelThemeAfterDashboardToggle !== "light" ||
+      result.panelThemeAfterPanelToggle !== "dark" ||
+      result.dashboardThemeAfterPanelToggle !== "dark" ||
+      result.settingsTheme !== "dark" ||
+      result.settingsThemeValue !== "dark" ||
       Number(result.themeSelectContrast || 0) < 4.5 ||
       result.settingsHeading !== "Settings"
     ) {

tests/e2e/dashboard.spec.js

@@ -71,6 +71,7 @@ test.beforeEach(async ({ page }) => {
   await page.addInitScript(() => {
     window.__queryResult = [];
     window.__calls = [];
+    window.__runtimeMessageListener = null;
 
     window.chrome = {
       tabs: {
@@ -95,6 +96,11 @@ test.beforeEach(async ({ page }) => {
           window.__calls.push({ api: "runtime.openOptionsPage" });
           return {};
         },
+        onMessage: {
+          addListener: (listener) => {
+            window.__runtimeMessageListener = listener;
+          }
+        },
         sendMessage: async (message) => {
           window.__calls.push({ api: "runtime.sendMessage", message });
           if (message?.type === "get-runtime-status") {
@@ -286,3 +292,16 @@ test("settings theme select maintains readable contrast in dark and light modes"
   expect(contrastRatios.darkRatio).toBeGreaterThanOrEqual(4.5);
   expect(contrastRatios.lightRatio).toBeGreaterThanOrEqual(4.5);
 });
+
+test("dashboard applies broadcast theme updates from runtime", async ({ page }) => {
+  await page.goto("/ui/dashboard.html");
+  await expect(page.locator("body")).toHaveAttribute("data-theme", "dark");
+
+  await page.evaluate(() => {
+    if (typeof window.__runtimeMessageListener === "function") {
+      window.__runtimeMessageListener({ type: "theme-changed", theme: "light" }, {}, () => {});
+    }
+  });
+
+  await expect(page.locator("body")).toHaveAttribute("data-theme", "light");
+});

tests/e2e/settings.spec.js

@@ -8,6 +8,7 @@ test.beforeEach(async ({ page }) => {
       "open-side-panel": { ok: true, mode: "sender_window" },
       "settings-updated": { ok: true }
     };
+    window.__runtimeMessageListener = null;
 
     window.chrome = {
       tabs: {
@@ -17,6 +18,11 @@ test.beforeEach(async ({ page }) => {
         }
       },
       runtime: {
+        onMessage: {
+          addListener: (listener) => {
+            window.__runtimeMessageListener = listener;
+          }
+        },
         sendMessage: async (message) => {
           window.__calls.push({ api: "runtime.sendMessage", message });
           const type = message?.type;
@@ -66,3 +72,18 @@ test("settings side panel action shows success status when opened", async ({ pag
   await page.click("#open-side-panel");
   await expect(page.locator("#status")).toHaveText("Side panel opened.");
 });
+
+test("settings page applies broadcast theme updates and syncs dropdown value", async ({ page }) => {
+  await page.goto("/ui/settings.html");
+  await expect(page.locator("body")).toHaveAttribute("data-theme", "dark");
+  await expect(page.locator("#theme")).toHaveValue("dark");
+
+  await page.evaluate(() => {
+    if (typeof window.__runtimeMessageListener === "function") {
+      window.__runtimeMessageListener({ type: "theme-changed", theme: "light" }, {}, () => {});
+    }
+  });
+
+  await expect(page.locator("body")).toHaveAttribute("data-theme", "light");
+  await expect(page.locator("#theme")).toHaveValue("light");
+});

ui/activity.js

@@ -326,6 +326,14 @@ function bindEvents() {
   });
 }
 
+function bindRuntimeListeners() {
+  chrome.runtime?.onMessage?.addListener?.((message) => {
+    if (message?.type === "theme-changed") {
+      applyTheme(message.theme);
+    }
+  });
+}
+
 async function bootstrapRuntimeSettings() {
   try {
     const runtime = await chrome.runtime.sendMessage({ type: "get-runtime-status" });
@@ -359,6 +367,7 @@ function startAutoRefresh() {
 
 async function initialize() {
   await bootstrapRuntimeSettings();
+  bindRuntimeListeners();
   bindEvents();
   await loadActivities();
   startAutoRefresh();

ui/settings.js

@@ -27,6 +27,12 @@ function applyTheme(theme) {
   document.body.dataset.theme = theme === "light" ? "light" : "dark";
 }
 
+function syncThemeUi(theme) {
+  const normalized = theme === "light" ? "light" : "dark";
+  applyTheme(normalized);
+  themeElement.value = normalized;
+}
+
 function renderStatus(message, isError = false) {
   statusElement.textContent = message;
   if (isError) {
@@ -41,8 +47,7 @@ async function loadSettings() {
   pausedElement.checked = Boolean(settings.paused);
   excludedDomainsElement.value = (settings.excludedDomains || []).join("\n");
   retentionDaysElement.textContent = String(settings.retentionDays || DEFAULT_SETTINGS.retentionDays);
-  themeElement.value = settings.theme || DEFAULT_SETTINGS.theme;
-  applyTheme(themeElement.value);
+  syncThemeUi(settings.theme || DEFAULT_SETTINGS.theme);
 }
 
 async function saveSettings() {
@@ -103,8 +108,17 @@ function bindEvents() {
   });
 }
 
+function bindRuntimeListeners() {
+  chrome.runtime?.onMessage?.addListener?.((message) => {
+    if (message?.type === "theme-changed") {
+      syncThemeUi(message.theme);
+    }
+  });
+}
+
 async function initialize() {
   await loadSettings();
+  bindRuntimeListeners();
   bindEvents();
 }