theme.js

// Theme management
class ThemeManager {
    constructor() {
        this.THEME_KEY = 'note_app_theme';
        this.currentTheme = localStorage.getItem(this.THEME_KEY) || 'light';
        this.init();
    }

    init() {
        // Apply saved theme on load
        this.applyTheme(this.currentTheme);
        
        // Set up theme toggle button
        const themeToggleBtn = document.getElementById('themeToggleBtn');
        if (themeToggleBtn) {
            themeToggleBtn.addEventListener('click', () => this.toggleTheme());
            this.updateThemeButton(themeToggleBtn, this.currentTheme);
        }
    }

    toggleTheme() {
        const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
        this.applyTheme(newTheme);
        this.currentTheme = newTheme;
        localStorage.setItem(this.THEME_KEY, newTheme);
    }

    applyTheme(theme) {
        document.body.classList.remove('theme-light', 'theme-dark');
        document.body.classList.add(`theme-${theme}`);
        
        // Update theme toggle button
        const themeToggleBtn = document.getElementById('themeToggleBtn');
        if (themeToggleBtn) {
            this.updateThemeButton(themeToggleBtn, theme);
        }
    }

    updateThemeButton(button, theme) {
        const icon = button.querySelector('i');
        const text = button.querySelector('span');
        
        if (theme === 'light') {
            icon.className = 'fas fa-moon';
            text.textContent = 'Dark Mode';
            button.title = 'Switch to dark mode';
        } else {
            icon.className = 'fas fa-sun';
            text.textContent = 'Light Mode';
            button.title = 'Switch to light mode';
        }
    }
}

// Initialize theme manager when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.themeManager = new ThemeManager();
});