1 files changed, 168 insertions, 50 deletions

diff --git a/static/theme-manager.js b/static/theme-manager.js
index 2ad080b..14e1469 100644
--- a/static/theme-manager.js
+++ b/static/theme-manager.js
@@ -1,59 +1,177 @@
 /* jshint esversion: 2024, module: true */
 
+import { ThemeMode } from "./enums.js";
+
+/**
+ * Static Theme Utilities
+ * @class ThemeUtils
+ */
+class ThemeUtils {
+	/**
+	 * Get theme from localStorage
+	 * @static
+	 * @returns {Symbol} Theme mode
+	 */
+	static getStoredTheme() {
+		const stored = localStorage.getItem("network-ui-theme");
+		return stored === "light" ? ThemeMode.LIGHT : ThemeMode.DARK;
+	}
+
+	/**
+	 * Store theme in localStorage
+	 * @static
+	 * @param {Symbol} theme - Theme mode
+	 */
+	static storeTheme(theme) {
+		const themeString = theme === ThemeMode.LIGHT ? "light" : "dark";
+		localStorage.setItem("network-ui-theme", themeString);
+	}
+
+	/**
+	 * Get theme icon based on theme mode
+	 * @static
+	 * @param {Symbol} theme - Theme mode
+	 * @returns {string} Icon character
+	 */
+	static getThemeIcon(theme) {
+		return theme === ThemeMode.DARK ? "☀️" : "🌙";
+	}
+
+	/**
+	 * Apply theme to document
+	 * @static
+	 * @param {Symbol} theme - Theme mode
+	 */
+	static applyThemeToDocument(theme) {
+		const themeString = theme === ThemeMode.LIGHT ? "light" : "dark";
+		document.documentElement.setAttribute("data-theme", themeString);
+	}
+
+	/**
+	 * Toggle theme mode
+	 * @static
+	 * @param {Symbol} currentTheme - Current theme mode
+	 * @returns {Symbol} New theme mode
+	 */
+	static toggleTheme(currentTheme) {
+		return currentTheme === ThemeMode.DARK ? ThemeMode.LIGHT : ThemeMode.DARK;
+	}
+}
+
 /**
  * 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' ? '☀️' : '🌙';
-        }
-    }
+	#elements;
+	#theme;
+
+	/**
+	 * @param {Object} elements - DOM elements
+	 */
+	constructor(elements) {
+		this.#elements = elements;
+		this.#theme = ThemeMode.DARK;
+	}
+
+	/**
+	 * Initialize theme manager
+	 * @method init
+	 */
+	init() {
+		this.#theme = ThemeUtils.getStoredTheme();
+		this.#applyTheme(this.#theme);
+		this.#setupEventListeners();
+	}
+
+	/**
+	 * Set up theme event listeners
+	 * @private
+	 */
+	#setupEventListeners() {
+		this.#elements.themeToggle?.addEventListener("click", () =>
+			this.#handleThemeToggle(),
+		);
+	}
+
+	/**
+	 * Handle theme toggle
+	 * @private
+	 */
+	#handleThemeToggle() {
+		const newTheme = ThemeUtils.toggleTheme(this.#theme);
+		this.#applyTheme(newTheme);
+	}
+
+	/**
+	 * Apply theme to UI
+	 * @private
+	 * @param {Symbol} theme - Theme mode
+	 */
+	#applyTheme(theme) {
+		this.#theme = theme;
+
+		// Apply to document
+		ThemeUtils.applyThemeToDocument(theme);
+
+		// Store preference
+		ThemeUtils.storeTheme(theme);
+
+		// Update theme icon
+		this.#updateThemeIcon();
+	}
+
+	/**
+	 * Update theme icon
+	 * @private
+	 */
+	#updateThemeIcon() {
+		if (this.#elements.themeIcon) {
+			this.#elements.themeIcon.textContent = ThemeUtils.getThemeIcon(
+				this.#theme,
+			);
+		}
+	}
+
+	/**
+	 * Get current theme
+	 * @method getCurrentTheme
+	 * @returns {Symbol} Current theme mode
+	 */
+	getCurrentTheme() {
+		return this.#theme;
+	}
+
+	/**
+	 * Set theme programmatically
+	 * @method setTheme
+	 * @param {Symbol} theme - Theme mode
+	 */
+	setTheme(theme) {
+		if (theme === ThemeMode.LIGHT || theme === ThemeMode.DARK) {
+			this.#applyTheme(theme);
+		} else {
+			console.warn("Invalid theme mode:", theme);
+		}
+	}
+
+	/**
+	 * Check if dark theme is active
+	 * @method isDarkTheme
+	 * @returns {boolean} True if dark theme is active
+	 */
+	isDarkTheme() {
+		return this.#theme === ThemeMode.DARK;
+	}
+
+	/**
+	 * Check if light theme is active
+	 * @method isLightTheme
+	 * @returns {boolean} True if light theme is active
+	 */
+	isLightTheme() {
+		return this.#theme === ThemeMode.LIGHT;
+	}
 }
 
-export { ThemeManager };
+export { ThemeManager, ThemeUtils };