web: swap GL theme stylesheet instead of inverting dark-theme icons

Load both goldenlayout-dark-theme.css and goldenlayout-light-theme.css,
toggling the disabled attribute on theme switch.  This lets the light
theme use its native black PNGs for window controls instead of applying
filter: invert(1) to the dark theme's white PNGs.

The tab overflow dropdown list is still custom-styled because neither
GL theme provides any styling for .lm_tabdropdown_list.

Signed-off-by: Matt Liberty <mliberty@precisioninno.com>

Author: maliberty

src/web/src/index.html

@@ -13,7 +13,8 @@
             crossorigin=""></script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/goldenlayout-base.css"/>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/themes/goldenlayout-dark-theme.css"/>
+    <link rel="stylesheet" id="gl-theme-dark" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/themes/goldenlayout-dark-theme.css"/>
+    <link rel="stylesheet" id="gl-theme-light" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/themes/goldenlayout-light-theme.css" disabled/>
 
     <script src="https://nturley.github.io/netlistsvg/elk.bundled.js"></script>
     <script src="https://nturley.github.io/netlistsvg/built/netlistsvg.bundle.js"></script>

src/web/src/main.js

@@ -16,7 +16,7 @@ import { RulerManager } from './ruler.js';
 import { SchematicWidget } from './schematic-widget.js';
 import { DrcWidget } from './drc-widget.js';
 import { TclCompleter } from './tcl-completer.js';
-import { setCookie } from './theme.js';
+import { setCookie, applyGLTheme } from './theme.js';
 import { updateDocumentTitle } from './title.js';
 
 // ─── Status Indicator ───────────────────────────────────────────────────────
@@ -657,6 +657,7 @@ app.focusComponent = focusComponent;
 app.toggleTheme = function() {
     const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
     document.documentElement.dataset.theme = next;
+    applyGLTheme(next);
     setCookie('or_theme', next);
     // Also write to localStorage for standalone file:// reports.
     if (typeof localStorage !== 'undefined') {

src/web/src/style.css

@@ -393,6 +393,50 @@ html, body {
     background: var(--border-subtle);
 }
 
+/* Tab overflow dropdown — neither GL theme styles the dropdown list, so
+ * it's transparent and effectively unusable.  Style it so overflowed tabs
+ * are visible and clickable. */
+.lm_header .lm_tabdropdown_list {
+    background: var(--bg-context);
+    border: 1px solid var(--border-strong);
+    box-shadow: 0 4px 12px var(--shadow);
+    min-width: 160px;
+    max-width: 320px;
+    max-height: 60vh;
+    overflow-y: auto !important;
+    overflow-x: hidden;
+    padding: 2px 0;
+    border-radius: 0 0 4px 4px;
+}
+.lm_header .lm_tabdropdown_list .lm_tab {
+    display: flex;
+    align-items: center;
+    width: auto;
+    height: auto;
+    padding: 4px 12px;
+    margin: 0;
+    background: transparent;
+    color: var(--fg-primary);
+    float: none;
+}
+.lm_header .lm_tabdropdown_list .lm_tab:hover {
+    background: var(--bg-hover);
+    color: var(--fg-bright);
+}
+.lm_header .lm_tabdropdown_list .lm_tab.lm_active {
+    background: var(--bg-selected);
+    color: var(--fg-white);
+}
+.lm_header .lm_tabdropdown_list .lm_tab .lm_title {
+    width: auto;
+    flex: 1;
+    color: inherit;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* Leaflet map cursor */
 .leaflet-container {
     cursor: default !important;

src/web/src/theme.js

@@ -14,13 +14,23 @@ export function setCookie(name, value) {
     document.cookie = name + '=' + value + '; path=/; max-age=31536000; SameSite=Lax';
 }
 
+// Enable the Golden Layout theme stylesheet matching the active theme.
+export function applyGLTheme(theme) {
+    const dark  = document.getElementById('gl-theme-dark');
+    const light = document.getElementById('gl-theme-light');
+    if (!dark || !light) return;
+    dark.disabled  = (theme !== 'dark');
+    light.disabled = (theme !== 'light');
+}
+
 if (typeof document !== 'undefined') {
     // Try cookie first (shared across ports for the live server),
     // then localStorage (works for standalone file:// reports).
     const savedTheme = getCookie('or_theme')
         || (typeof localStorage !== 'undefined' && localStorage.getItem('or_theme'))
         || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
     document.documentElement.dataset.theme = savedTheme;
+    applyGLTheme(savedTheme);
 }
 
 // Read current CSS custom property values for canvas-based widgets.

src/web/src/web.cpp

@@ -1023,7 +1023,8 @@ void WebServer::saveReport(const std::string& filename,
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/goldenlayout-base.css"/>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/themes/goldenlayout-dark-theme.css"/>
+<link rel="stylesheet" id="gl-theme-dark" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/themes/goldenlayout-dark-theme.css"/>
+<link rel="stylesheet" id="gl-theme-light" href="https://cdn.jsdelivr.net/npm/golden-layout@2.6.0/dist/css/themes/goldenlayout-light-theme.css" disabled/>
 <style>
 )" << kReportCSS
       << R"(