Split the system

1 files changed, 59 insertions, 0 deletions

diff --git a/static/theme-manager.js b/static/theme-manager.js
new file mode 100644
index 0000000..2ad080b
--- /dev/null
+++ b/static/theme-manager.js
@@ -0,0 +1,59 @@
+/* jshint esversion: 2024, module: true */
+
+/**
+ * Theme Manager for handling light/dark themes
+ * @class ThemeManager
+ */
+class ThemeManager {
+    /**
+     * @param {Object} elements - DOM elements
+     */
+    constructor(elements) {
+        this.elements = elements;
+        this.theme = localStorage.getItem('network-ui-theme') || 'dark';
+    }
+
+    /**
+     * Initialize theme manager
+     * @method init
+     */
+    init() {
+        this.applyTheme(this.theme);
+        this.setupEventListeners();
+    }
+
+    /**
+     * Set up theme event listeners
+     * @method setupEventListeners
+     */
+    setupEventListeners() {
+        this.elements.themeToggle?.addEventListener('click', () => this.toggleTheme());
+    }
+
+    /**
+     * Toggle between light and dark themes
+     * @method toggleTheme
+     */
+    toggleTheme() {
+        const newTheme = this.theme === 'dark' ? 'light' : 'dark';
+        this.applyTheme(newTheme);
+    }
+
+    /**
+     * Apply theme to document
+     * @method applyTheme
+     * @param {string} theme - Theme name ('light' or 'dark')
+     */
+    applyTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        this.theme = theme;
+        localStorage.setItem('network-ui-theme', theme);
+
+        // Update theme icon
+        if (this.elements.themeIcon) {
+            this.elements.themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
+        }
+    }
+}
+
+export { ThemeManager };