kinda working safe point

app/static/js/theme.js

@@ -0,0 +1,62 @@
+/**
+ * Theme handling functionality
+ */
+document.addEventListener('DOMContentLoaded', function () {
+    const themeToggle = document.querySelector('.theme-toggle-icon');
+
+    if (themeToggle) {
+        themeToggle.addEventListener('click', function () {
+            const currentTheme = document.documentElement.getAttribute('data-theme') || 'system';
+            let newTheme;
+
+            if (currentTheme === 'dark') {
+                newTheme = 'light';
+            } else {
+                newTheme = 'dark';
+            }
+
+            // Update theme
+            document.documentElement.setAttribute('data-theme', newTheme);
+
+            // Store preference
+            localStorage.setItem('theme_preference', newTheme);
+
+            // Update icon
+            updateThemeIcon(newTheme);
+        });
+
+        // Initialize theme on page load
+        initTheme();
+    }
+
+    function initTheme() {
+        // Get saved preference
+        let theme = localStorage.getItem('theme_preference');
+
+        // If no preference, check system preference
+        if (!theme) {
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                theme = 'dark';
+            } else {
+                theme = 'light';
+            }
+        }
+
+        // Apply theme
+        document.documentElement.setAttribute('data-theme', theme);
+
+        // Update icon
+        updateThemeIcon(theme);
+    }
+
+    function updateThemeIcon(theme) {
+        const icon = document.querySelector('.theme-toggle-icon i');
+        if (icon) {
+            if (theme === 'dark') {
+                icon.className = 'fas fa-sun';
+            } else {
+                icon.className = 'fas fa-moon';
+            }
+        }
+    }
+});