From 8579a925d7d5ca219f08d8e86ae113ffed32f574 Mon Sep 17 00:00:00 2001
From: Hugh Kaznowski <hughkaznowski@Hughs-MacBook-Pro.local>
Date: Sat, 5 Sep 2026 19:32:00 +0100
Subject: [PATCH] Apply theme/custom CSS in popped-out standalone tabs (ticket
 025)

StandalonePage now calls useSettingsPanel() so colour scheme and any
active custom theme CSS are applied on mount and stay in sync with
settings changes, matching the main window's NavMenu-driven behavior.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
---
 webapp/src/App.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index f055571..47612d9 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -19,6 +19,7 @@ import {
   type TimelineBucket,
 } from './lib/api'
 import { DocsNavProvider } from './lib/docsNav'
+import { useSettingsPanel } from './lib/useSettingsPanel'
 
 const POLL_MS = 2000
 
@@ -34,7 +35,12 @@ function parsePopOutQuery(): { section: PopOutSectionId | null; range: TimeRange
   return { section, range }
 }
 
+// Popped-out routes render outside NavMenu, which is otherwise the only place that calls `useSettingsPanel()` and applies the
+// colour scheme / custom theme CSS as a side effect. Calling it here (state unused) keeps standalone tabs themed the same as
+// the main window, including staying live if settings change while the tab is open.
 function StandalonePage({ children }: { children: ReactNode }) {
+  useSettingsPanel()
+
   return (
     <DocsNavProvider>
       <div className="h-screen w-screen overflow-auto">{children}</div>