From 245c775f54b8b55909a79b7c18aa6f5eb2b37a67 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Tue, 24 Feb 2026 13:00:14 -0500
Subject: [PATCH] feat(theme): add active indicators for theme dropdown

- Create themeDropdown.ts to manage active state highlighting
- Show which theme/wood option is currently selected
- Use CSS classes instead of inline styles for indicators
- Wrap existing functions to update indicators on toggle
- Auto-initialize indicators on DOM ready
---
 web/src/themeDropdown.ts | 55 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 web/src/themeDropdown.ts

diff --git a/web/src/themeDropdown.ts b/web/src/themeDropdown.ts
new file mode 100644
index 0000000..e8a3188
--- /dev/null
+++ b/web/src/themeDropdown.ts
@@ -0,0 +1,55 @@
+// Theme dropdown active indicator management
+
+// Update visual indicators for theme buttons
+const updateThemeIndicators = (): void => {
+    const currentTheme = localStorage.getItem('theme') || 'tokyo-night';
+
+    // Update theme buttons (all buttons with changeThemeTo onclick)
+    document.querySelectorAll('[onclick^="changeThemeTo"]').forEach(btn => {
+        const onclick = btn.getAttribute('onclick') || '';
+        const match = onclick.match(/changeThemeTo\('(.+?)'\)/);
+        if (match) {
+            const theme = match[1];
+            if (theme === currentTheme) {
+                // Active state - use CSS class instead of inline style
+                btn.classList.add('bg-theme-active');
+                btn.classList.remove('bg-theme-inactive');
+            } else {
+                // Inactive state
+                btn.classList.remove('bg-theme-active');
+                btn.classList.add('bg-theme-inactive');
+            }
+        }
+    });
+};
+
+// Make function available globally
+(window as any).updateThemeIndicators = updateThemeIndicators;
+
+// Update on dropdown toggle
+const originalToggleThemeDropdown = (window as any).toggleThemeDropdown;
+if (originalToggleThemeDropdown) {
+    (window as any).toggleThemeDropdown = () => {
+        originalToggleThemeDropdown();
+        updateThemeIndicators();
+        (window as any).updateWoodPanelingIndicators?.();
+    };
+}
+
+// Update after theme changes
+const originalChangeThemeTo = (window as any).changeThemeTo;
+if (originalChangeThemeTo) {
+    (window as any).changeThemeTo = (...args: unknown[]) => {
+        originalChangeThemeTo(...args);
+        updateThemeIndicators();
+    };
+}
+
+// Auto-initialize when DOM is ready
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', updateThemeIndicators);
+    } else {
+        updateThemeIndicators();
+    }
+}