diff --git a/docker/resume/includes.js b/docker/resume/includes.js index d47161c..16d51ef 100644 --- a/docker/resume/includes.js +++ b/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(); }); }