Implemented dark mode, added TDD, fixed BDD

Closes #31 (closed)

assets/js/theme.js

 const initTheme = () => {
-    // Check for saved theme preference or default to system preference
-    const savedTheme = localStorage.getItem('theme') || 
-      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-    
-    // Apply initial theme
-    document.documentElement.setAttribute('data-theme', savedTheme);
-    if (savedTheme === 'dark') {
+  // Check if user is logged in
+  if (window.currentUser) {
+    // For logged-in users, use their database preference
+    const userDarkMode = window.userDarkMode === true;
+    applyTheme(userDarkMode ? 'dark' : 'light');
+  } else {
+    // For non-authenticated users, use localStorage
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    applyTheme(savedTheme);
+  }
+
+  // Helper function to apply theme
+  function applyTheme(theme) {
+    if (theme === 'dark') {
       document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
     }
-  
-    // Add click handler to theme toggle button
-    document.addEventListener('click', (e) => {
-      const themeToggle = e.target.closest('[data-theme-toggle]');
-      if (themeToggle) {
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-        
-        // Update localStorage
-        localStorage.setItem('theme', newTheme);
-        
-        // Update document classes and data attributes
-        document.documentElement.setAttribute('data-theme', newTheme);
-        if (newTheme === 'dark') {
-          document.documentElement.classList.add('dark');
-        } else {
-          document.documentElement.classList.remove('dark');
+    localStorage.setItem('theme', theme);
+  }
+
+  // Add click handler to theme toggle button
+  document.addEventListener('click', async (e) => {
+    const themeToggle = e.target.closest('[data-theme-toggle]');
+    if (themeToggle) {
+      const isDark = !document.documentElement.classList.contains('dark');
+      const newTheme = isDark ? 'dark' : 'light';
+      
+      // Apply theme change
+      applyTheme(newTheme);
+
+      // If user is logged in, save preference to server
+      if (window.currentUser) {
+        try {
+          await fetch('/api/update_theme', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRF-Token': document.querySelector("meta[name='csrf-token']").content
+            },
+            credentials: 'same-origin',
+            body: JSON.stringify({ is_dark_mode: isDark })
+          });
+        } catch (error) {
+          console.error('Error updating theme preference:', error);
         }
       }
-    });
-  
-    // Listen for system theme changes
-    window.matchMedia('(prefers-color-scheme: dark)')
-      .addEventListener('change', e => {
-        if (!localStorage.getItem('theme')) {
-          const newTheme = e.matches ? 'dark' : 'light';
-          document.documentElement.setAttribute('data-theme', newTheme);
-          if (newTheme === 'dark') {
-            document.documentElement.classList.add('dark');
-          } else {
-            document.documentElement.classList.remove('dark');
-          }
-        }
-      });
-  };
-  
-  export default initTheme;
\ No newline at end of file
+    }
+  });
+};
+
+export default initTheme;
\ No newline at end of file