static/js/theme.js

document.addEventListener('DOMContentLoaded', () => {
    // Respect any early-applied theme (set inline in head) to avoid flicker
    const initialTheme = document.documentElement.getAttribute('data-theme') || localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', initialTheme);

    // Avoid creating duplicate toggle if one already exists
    if (document.querySelector('.theme-toggle')) return;

    // Create and insert theme toggle button
    const themeToggle = document.createElement('button');
    themeToggle.className = 'theme-toggle';
    themeToggle.setAttribute('aria-label', 'Toggle dark mode');

    // Set initial accessible label/title/icon state
    themeToggle.title = initialTheme === 'dark' ? 'Mode clair' : 'Mode sombre';

    // Find the nav-links container and insert the button
    const navLinks = document.querySelector('.nav-links');
    if (navLinks) {
        navLinks.appendChild(themeToggle);
    }

    // Toggle theme function
    const toggleTheme = () => {
        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
        themeToggle.title = newTheme === 'dark' ? 'Mode clair' : 'Mode sombre';

        // Add animation class
        themeToggle.classList.add('theme-toggle-animation');
        setTimeout(() => themeToggle.classList.remove('theme-toggle-animation'), 300);
    };

    // Add click event listener
    themeToggle.addEventListener('click', toggleTheme);
});