update dark and light mode

public/js/main.js

@@ -1,5 +1,7 @@
 // Mobile menu toggle
 document.addEventListener('DOMContentLoaded', function() {
+  console.log("DOM loaded - initializing dark mode");
+  
   const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
   const mobileMenu = document.getElementById('mobile-menu');
   const menuIcons = menuButton.querySelectorAll('svg');
@@ -20,4 +22,77 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     });
   }
+
+  // Theme toggle functionality
+  const themeToggleBtn = document.getElementById('theme-toggle');
+  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
+
+  // Check if dark mode is already enabled
+  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
+    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  console.log("Initial dark mode state:", isDarkMode);
+
+  // Set initial theme
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.remove('hidden');
+      themeToggleDarkIcon.classList.add('hidden');
+    }
+  } else {
+    document.documentElement.classList.remove('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.add('hidden');
+      themeToggleDarkIcon.classList.remove('hidden');
+    }
+  }
+
+  // Toggle theme function
+  function toggleTheme() {
+    console.log("Toggle theme clicked");
+    
+    // Add transition class
+    document.documentElement.classList.add('transition');
+    
+    // Toggle theme
+    const isDark = document.documentElement.classList.contains('dark');
+    console.log("Current dark mode:", isDark);
+    
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('color-theme', 'light');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.add('hidden');
+        themeToggleDarkIcon.classList.remove('hidden');
+      }
+      console.log("Switched to light mode");
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('color-theme', 'dark');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.remove('hidden');
+        themeToggleDarkIcon.classList.add('hidden');
+      }
+      console.log("Switched to dark mode");
+    }
+    
+    // Remove transition class after transition completes
+    setTimeout(() => {
+      document.documentElement.classList.remove('transition');
+    }, 300);
+  }
+
+  // Add event listeners to toggle buttons
+  if (themeToggleBtn) {
+    console.log("Adding event listener to theme toggle button");
+    themeToggleBtn.addEventListener('click', toggleTheme);
+  }
+  
+  if (mobileThemeToggleBtn) {
+    console.log("Adding event listener to mobile theme toggle button");
+    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
+  }
 });