document.addEventListener("DOMContentLoaded", () => {
    const toggleBtn = document.getElementById('toggle-theme');
    const schemeSelect = document.getElementById('color-scheme');
    const body = document.body;

    const savedTheme = localStorage.getItem('theme');
    const savedScheme = localStorage.getItem('scheme');

    if (savedTheme === 'light') {
        body.classList.add('light-mode');
        toggleBtn.textContent = '🌙 Switch to Dark Mode';
    }

    if (savedScheme) {
        body.classList.add(savedScheme);
        schemeSelect.value = savedScheme;
    }

    toggleBtn?.addEventListener('click', () => {
        body.classList.toggle('light-mode');
        const isLight = body.classList.contains('light-mode');
        toggleBtn.textContent = isLight ? '🌙 Switch to Dark Mode' : '🌞 Switch to Light Mode';
        localStorage.setItem('theme', isLight ? 'light' : 'dark');
    });

    schemeSelect?.addEventListener('change', () => {
        body.classList.remove('ocean', 'sunset');
        const selected = schemeSelect.value;
        if (selected) {
            body.classList.add(selected);
            localStorage.setItem('scheme', selected);
        } else {
            localStorage.removeItem('scheme');
        }
    });
});