document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle');
    const themeIcon = document.getElementById('theme-icon');

    function applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        themeIcon.src = theme === 'dark' ? 'icons/pixelarticons/svg/moon.svg' : 'icons/pixelarticons/svg/sun-alt.svg';
        themeToggle.checked = theme === 'dark';
    }

    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    applyTheme(systemPrefersDark ? 'dark' : 'light');

    themeToggle.addEventListener('change', function() {
        if (this.checked) {
            applyTheme('dark');
        } else {
            applyTheme('light');
        }
    });
});