theme.js

// Theme toggle functionality shared across pages

// SVG icon paths
const MOON_VIEWBOX = '0 0 384 512';
const MOON_PATH = 'M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z';
const SUN_VIEWBOX = '0 0 512 512';
const SUN_PATH = 'M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192z';

// Check for saved theme preference or default to light mode
const savedTheme = localStorage.getItem('theme');
const currentTheme = savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', currentTheme);

function updateIcon(theme) {
    const svg = document.querySelector('.theme-toggle-slider .icon-moon');
    if (!svg) return;
    const path = svg.querySelector('path');
    if (theme === 'dark') {
        svg.setAttribute('viewBox', SUN_VIEWBOX);
        path.setAttribute('d', SUN_PATH);
    } else {
        svg.setAttribute('viewBox', MOON_VIEWBOX);
        path.setAttribute('d', MOON_PATH);
    }
}

function toggleTheme() {
    const theme = document.documentElement.getAttribute('data-theme');
    const newTheme = theme === 'light' ? 'dark' : 'light';

    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);

    // Update icon
    updateIcon(newTheme);

    // Update aria-label for accessibility
    const btn = document.querySelector('.theme-toggle');
    if (btn) {
        btn.setAttribute('aria-label', newTheme === 'light' ? 'Switch to dark mode' : 'Switch to light mode');
        btn.setAttribute('aria-checked', newTheme === 'dark' ? 'true' : 'false');
    }

    // Dispatch custom event for theme change
    document.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } }));
}

// Set initial icon and aria-label on page load
window.addEventListener('DOMContentLoaded', () => {
    const theme = document.documentElement.getAttribute('data-theme');
    updateIcon(theme);

    // Set initial aria-label and attach event listener
    const btn = document.querySelector('.theme-toggle');
    if (btn) {
        btn.setAttribute('aria-label', theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode');
        btn.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
        btn.addEventListener('click', toggleTheme);
    }

    // Auto-update copyright year
    document.querySelectorAll('.copyright-year').forEach(el => {
        el.textContent = new Date().getFullYear();
    });
});