(function() {
    const themeToggle = document.getElementById('theme-toggle');
    const themeIcon = document.getElementById('theme-icon');
    
    function getStoredTheme() {
        return localStorage.getItem('picoPreferredColorScheme') || document.documentElement.getAttribute('data-theme') || 'auto';
    }
    
    function storeTheme(theme) {
        localStorage.setItem('picoPreferredColorScheme', theme);
    }
    
    function getSystemTheme() {
        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    
    function applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        
        if (theme === 'dark') {
            themeIcon.textContent = '☀️';
            themeToggle.setAttribute('aria-pressed', 'true');
        } else {
            themeIcon.textContent = '🌙';
            themeToggle.setAttribute('aria-pressed', 'false');
        }
    }
    
    function toggleTheme() {
        let currentStored = getStoredTheme();
        if (currentStored === 'auto') {
            currentStored = getSystemTheme();
        }
        if (currentStored === 'auto') {
            currentStored = 'light';
        }
        let nextTheme;
        
        nextTheme = currentStored === 'light' ? 'dark' : 'light';
        
        storeTheme(nextTheme);
        applyTheme(nextTheme);
    }
    
    function init() {
        if (themeToggle) {
            applyTheme();
            
            themeToggle.addEventListener('click', toggleTheme);
            
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
                if (getStoredTheme() === 'auto') {
                    applyTheme();
                }
            });
        }
    }
    
    if (document.readyState !== 'loading') {
        init();
    } else {
        document.addEventListener('DOMContentLoaded', init);
    }
})();