mcp-quiz-server/public/dist/components/ThemeSelector.js

🧠 AI-Powered Quiz Management via Model Context Protocol (MCP) - Create, manage, and take quizzes directly from VS Code, Claude, and other AI agents.

import { ThemeService } from '../services/ThemeService';
import { Component } from './Component';
export class ThemeSelector extends Component {
    constructor() {
        super('body');
        this.unsubscribe = null;
        this.themeService = ThemeService.getInstance();
        this.themeMenuBtn = document.querySelector('#theme-menu-btn');
        this.themeDropdown = document.querySelector('#theme-dropdown');
    }
    onMount() {
        this.unsubscribe = this.themeService.subscribe(theme => this.onThemeChange(theme));
        this.themeService.initialize();
    }
    onUnmount() {
        this.unsubscribe?.();
    }
    render() {
    }
    bindEvents() {
        this.themeMenuBtn?.addEventListener('click', e => {
            e.stopPropagation();
            this.themeDropdown?.classList.toggle('hidden');
        });
        document.querySelector('#close-theme-menu')?.addEventListener('click', () => {
            this.themeDropdown?.classList.add('hidden');
        });
        document.addEventListener('click', e => {
            if (!this.themeDropdown?.contains(e.target) &&
                !this.themeMenuBtn?.contains(e.target)) {
                this.themeDropdown?.classList.add('hidden');
            }
        });
        document.querySelectorAll('.theme-option').forEach(btn => {
            btn.addEventListener('click', () => {
                const mode = btn.dataset.theme;
                if (mode) {
                    this.themeService.setMode(mode);
                    this.updateActiveTheme(mode);
                    this.themeDropdown?.classList.add('hidden');
                }
            });
        });
    }
    onThemeChange(theme) {
        this.updateActiveTheme(theme.mode);
        this.updateThemeButtonIcon(theme.mode);
    }
    updateActiveTheme(currentMode) {
        document.querySelectorAll('.theme-option').forEach(btn => {
            const mode = btn.dataset.theme;
            if (mode === currentMode) {
                btn.classList.add('active');
            }
            else {
                btn.classList.remove('active');
            }
        });
    }
    updateThemeButtonIcon(mode) {
        const icon = this.themeMenuBtn?.querySelector('i[data-lucide]');
        if (icon) {
            switch (mode) {
                case 'light':
                    icon.setAttribute('data-lucide', 'sun');
                    break;
                case 'dark':
                    icon.setAttribute('data-lucide', 'moon');
                    break;
                case 'system':
                    icon.setAttribute('data-lucide', 'monitor');
                    break;
                default:
                    icon.setAttribute('data-lucide', 'palette');
            }
            if (window.lucide) {
                window.lucide.createIcons();
            }
        }
    }
}
//# sourceMappingURL=ThemeSelector.js.map