init

public/js/theme.js

@@ -0,0 +1,76 @@
+// Theme Management
+class ThemeManager {
+    constructor() {
+        this.storageKey = 'pgadmin-theme';
+        this.darkClass = 'dark';
+        this.init();
+    }
+
+    init() {
+        const savedTheme = localStorage.getItem(this.storageKey);
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const isDark = savedTheme ? savedTheme === 'dark' : prefersDark;
+
+        if (isDark) {
+            this.setDark();
+        } else {
+            this.setLight();
+        }
+
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem(this.storageKey)) {
+                e.matches ? this.setDark() : this.setLight();
+            }
+        });
+    }
+
+    toggle() {
+        const html = document.documentElement;
+        if (html.classList.contains(this.darkClass)) {
+            this.setLight();
+        } else {
+            this.setDark();
+        }
+    }
+
+    setDark() {
+        document.documentElement.classList.add(this.darkClass);
+        localStorage.setItem(this.storageKey, 'dark');
+        this.updateIcons();
+    }
+
+    setLight() {
+        document.documentElement.classList.remove(this.darkClass);
+        localStorage.setItem(this.storageKey, 'light');
+        this.updateIcons();
+    }
+
+    isDark() {
+        return document.documentElement.classList.contains(this.darkClass);
+    }
+
+    updateIcons() {
+        // Update Lucide icons if needed
+        if (typeof lucide !== 'undefined') {
+            lucide.createIcons();
+        }
+    }
+}
+
+// Initialize theme manager
+const themeManager = new ThemeManager();
+
+// Theme toggle button handlers
+document.addEventListener('DOMContentLoaded', () => {
+    const themeButtons = [
+        document.getElementById('toggleTheme'),
+        document.getElementById('toggleAdminTheme')
+    ];
+
+    themeButtons.forEach(btn => {
+        if (btn) {
+            btn.addEventListener('click', () => themeManager.toggle());
+        }
+    });
+});