fix(theme-toggle): Implement proper sun/moon icons and JS toggling

assets/js/main.js

@@ -49,14 +49,33 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Theme Switcher
     const themeToggle = document.getElementById('theme-toggle');
-    // const htmlElement = document.documentElement; // Already defined above
+    const sunIcon = document.getElementById('theme-toggle-sun-icon');
+    const moonIcon = document.getElementById('theme-toggle-moon-icon');
+
+    const setThemeIcons = (theme) => {
+        if (sunIcon && moonIcon) {
+            if (theme === 'dark') {
+                sunIcon.classList.remove('hidden');
+                moonIcon.classList.add('hidden');
+            } else {
+                sunIcon.classList.add('hidden');
+                moonIcon.classList.remove('hidden');
+            }
+        }
+    };
 
     const currentTheme = localStorage.getItem('theme');
     if (currentTheme) {
         htmlElement.setAttribute('data-theme', currentTheme);
+        setThemeIcons(currentTheme);
     } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
         // Default to light theme if system preference is light
         htmlElement.setAttribute('data-theme', 'light');
+        setThemeIcons('light');
+    } else {
+        // Default to dark theme if no preference
+        htmlElement.setAttribute('data-theme', 'dark');
+        setThemeIcons('dark');
     }
 
     if (themeToggle) {
@@ -64,6 +83,7 @@ document.addEventListener('DOMContentLoaded', () => {
             let newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
             htmlElement.setAttribute('data-theme', newTheme);
             localStorage.setItem('theme', newTheme);
+            setThemeIcons(newTheme);
         });
     }