dynamic-interaction
Version:
Dynamic interaction 动态交互mcp，用于cursor、windsurf、trae 等 AI 智能编辑器 Agent 运行时交互使用
85 lines • 2.83 kB
JavaScript
/**
* 主题服务模块
* 处理应用主题切换和保存
*/
import { THEME_CONFIG } from '../config/constants.js';
import { eventBus, APP_EVENTS } from '../core/events.js';
import { getElementById } from '../utils/dom.js';
class ThemeService {
static instance;
currentTheme = THEME_CONFIG.DEFAULT_THEME;
constructor() {
this.loadTheme();
}
static getInstance() {
if (!ThemeService.instance) {
ThemeService.instance = new ThemeService();
}
return ThemeService.instance;
}
initializeThemeSwitcher() {
const themeSwitcher = getElementById('theme-switcher');
const sunIcon = document.querySelector('.theme-icon-sun');
const moonIcon = document.querySelector('.theme-icon-moon');
if (!themeSwitcher || !sunIcon || !moonIcon) {
console.error('Theme switcher elements not found!');
return;
}
themeSwitcher.addEventListener('click', () => {
this.toggleTheme();
});
this.applyTheme(this.currentTheme);
}
toggleTheme() {
const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
this.setTheme(newTheme);
}
setTheme(theme) {
this.currentTheme = theme;
this.applyTheme(theme);
this.saveTheme(theme);
eventBus.emit(APP_EVENTS.THEME_CHANGED, theme);
}
getCurrentTheme() {
return this.currentTheme;
}
applyTheme(theme) {
const body = document.body;
const sunIcon = document.querySelector('.theme-icon-sun');
const moonIcon = document.querySelector('.theme-icon-moon');
if (!sunIcon || !moonIcon)
return;
if (theme === 'light') {
body.classList.add('light-theme');
sunIcon.style.display = 'none';
moonIcon.style.display = 'inline-block';
}
else {
body.classList.remove('light-theme');
sunIcon.style.display = 'inline-block';
moonIcon.style.display = 'none';
}
// Re-render Lucide icons
if (window.lucide) {
window.lucide.createIcons();
}
}
loadTheme() {
const savedTheme = localStorage.getItem(THEME_CONFIG.STORAGE_KEY);
const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
if (savedTheme && THEME_CONFIG.THEMES.includes(savedTheme)) {
this.currentTheme = savedTheme;
}
else if (prefersDark) {
this.currentTheme = 'dark';
}
else {
this.currentTheme = 'light';
}
}
saveTheme(theme) {
localStorage.setItem(THEME_CONFIG.STORAGE_KEY, theme);
}
}
export const themeService = ThemeService.getInstance();
//# sourceMappingURL=theme.js.map