Fix theme toggle button by moving initialization to includes.js

docker/resume/includes.js

@@ -74,6 +74,79 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 100); // Small delay to ensure the DOM is updated
     }
 
+    // Function to initialize theme toggle
+    function initThemeToggle() {
+        const themeToggle = document.getElementById('themeToggle');
+        if (!themeToggle) {
+            console.log('Theme toggle button not found on this page');
+            return;
+        }
+        
+        // Check for saved theme preference, default to auto
+        const savedTheme = localStorage.getItem('theme') || 'auto';
+        
+        // Set initial value for aria-checked attribute
+        themeToggle.setAttribute('aria-checked', savedTheme !== 'auto');
+        
+        updateTheme(savedTheme);
+        
+        function updateTheme(theme) {
+            // Update button state and labels
+            const themeLabels = {
+                light: 'Theme mode: Light',
+                dark: 'Theme mode: Dark',
+                auto: 'Theme mode: Auto'
+            };
+            
+            themeToggle.setAttribute('aria-label', themeLabels[theme]);
+            themeToggle.setAttribute('aria-checked', theme !== 'auto');
+            
+            // Update button icon
+            const themeIcons = {
+                light: '🌞',
+                dark: '🌙',
+                auto: '🌓'
+            };
+            
+            themeToggle.textContent = themeIcons[theme];
+            
+            const html = document.documentElement;
+            if (theme === 'auto') {
+                html.removeAttribute('data-theme');
+            } else {
+                html.setAttribute('data-theme', theme);
+            }
+        }
+        
+        themeToggle.addEventListener('click', () => {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme') || 'auto';
+            let newTheme;
+            
+            switch(currentTheme) {
+                case 'light':
+                    newTheme = 'dark';
+                    break;
+                case 'dark':
+                    newTheme = 'auto';
+                    break;
+                default:
+                    newTheme = 'light';
+            }
+            
+            updateTheme(newTheme);
+            localStorage.setItem('theme', newTheme);
+        });
+
+        // Handle keyboard navigation
+        themeToggle.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                themeToggle.click();
+            }
+        });
+    }
+
     // Process header and footer placeholders
     const headerElement = document.getElementById('header-include');
     const footerElement = document.getElementById('footer-include');
@@ -82,6 +155,7 @@ document.addEventListener('DOMContentLoaded', function() {
         includeHTML('header-include', '/includes/header.html', () => {
             setActiveNavItem();
             setupNavDropdowns();
+            initThemeToggle();
         });
     }