Files
ottyl/tickets/025-popout-tabs-dont-apply-theme.md
T
2026-09-05 19:29:01 +01:00

1.5 KiB

Popped-out tabs don't apply the active colour scheme/theme at all

Reported: clicking "Open in new tab" (PopOutButton) opens a tab that doesn't match the current colour scheme/theme at all.

Root cause: applying the colour scheme (applyColorScheme, document.documentElement class) and injecting any active custom theme's CSS is done entirely inside useSettingsPanel() (webapp/src/lib/useSettingsPanel.ts), and that hook is only ever called from NavMenu.tsx:34. Every popped-out standalone route (StandalonePage in App.tsx, used by StandaloneLog, StandaloneParams, StandaloneRanged for metrics/dashboards) wraps its children in DocsNavProvider only — it never renders NavMenu and never calls useSettingsPanel(). So a popped-out tab never sets the colour-scheme class or injects the custom theme <style> tag; it just renders with no theme applied.

Acceptance criteria

  • Opening any section in a new tab (log, params, metrics, dashboards) applies the same colour scheme and, if active, the same custom theme CSS as the tab it was opened from.
  • StandalonePage (or each standalone route) calls useSettingsPanel() (or otherwise triggers applyColorScheme/custom-theme injection) on mount, without needing to render the full NavMenu settings UI.
  • Theme application in the popped-out tab stays live if settings change while it's open (consistent with how the main window already behaves via useSettingsPanel), not just correct at initial load.
  • No regression to the main window's existing theme behavior via NavMenu.