基于 CSS variables 与 DOM 的主题管理器
// 基本用法const themeManager = new ThemeManager({ baseVariables: { '--primary-color': '#007bff' },});// 注册主题themeManager .register('light', { '--bg-color': '#ffffff', '--text-color': '#333333' }) .register('dark', { '--bg-color': '#1a1a1a', '--text-color': '#ffffff' });// 切换主题themeManager.toggle('dark');// 获取主题信息console.log(themeManager.getCurrentTheme()); // 'dark'console.log(themeManager.getAllThemes()); // 所有已注册的主题// 批量注册themeManager.registerBatch({ blue: { '--primary-color': '#007bff' }, green: { '--primary-color': '#28a745' }});// 事件监听themeManager.on('themeChange', (name, data) => { console.log('主题已切换:', name);});// 清理资源themeManager.destroy(); Copy
// 基本用法const themeManager = new ThemeManager({ baseVariables: { '--primary-color': '#007bff' },});// 注册主题themeManager .register('light', { '--bg-color': '#ffffff', '--text-color': '#333333' }) .register('dark', { '--bg-color': '#1a1a1a', '--text-color': '#ffffff' });// 切换主题themeManager.toggle('dark');// 获取主题信息console.log(themeManager.getCurrentTheme()); // 'dark'console.log(themeManager.getAllThemes()); // 所有已注册的主题// 批量注册themeManager.registerBatch({ blue: { '--primary-color': '#007bff' }, green: { '--primary-color': '#28a745' }});// 事件监听themeManager.on('themeChange', (name, data) => { console.log('主题已切换:', name);});// 清理资源themeManager.destroy();
Optional
事件类型，不传则清除所有事件的监听器
当前实例（支持链式调用）
清除所有事件监听器
themeManager.clearListeners('themeChange'); // 清除特定事件监听器themeManager.clearListeners(); // 清除所有监听器 Copy
themeManager.clearListeners('themeChange'); // 清除特定事件监听器themeManager.clearListeners(); // 清除所有监听器
源主题名称
目标主题名称
覆盖的变量
复制主题
// 基于 dark 主题创建 dark-blue 主题themeManager.cloneTheme('dark', 'dark-blue', { '--primary-color': '#007bff'}); Copy
// 基于 dark 主题创建 dark-blue 主题themeManager.cloneTheme('dark', 'dark-blue', { '--primary-color': '#007bff'});
销毁主题管理器，释放所有资源
themeManager.destroy(); Copy
themeManager.destroy();
主题信息数组
获取所有已注册的主题信息
const themes = themeManager.getAllThemes();themes.forEach(theme => { console.log(`${theme.name}: ${theme.isActive ? '活跃' : '非活跃'}`);}); Copy
const themes = themeManager.getAllThemes();themes.forEach(theme => { console.log(`${theme.name}: ${theme.isActive ? '活跃' : '非活跃'}`);});
当前主题名称，无主题时返回 null
获取当前应用的主题名称
const currentTheme = themeManager.getCurrentTheme(); // 'dark' | null Copy
const currentTheme = themeManager.getCurrentTheme(); // 'dark' | null
状态信息对象
获取管理器状态信息
const status = themeManager.getStatus();console.log(`注册主题数: ${status.registeredThemes}`); Copy
const status = themeManager.getStatus();console.log(`注册主题数: ${status.registeredThemes}`);
主题名称，不传则返回当前主题的数据
主题数据，不存在时返回 null
获取主题数据
const currentData = themeManager.getThemeData(); // 当前主题数据const darkData = themeManager.getThemeData('dark'); // 指定主题数据 Copy
const currentData = themeManager.getThemeData(); // 当前主题数据const darkData = themeManager.getThemeData('dark'); // 指定主题数据
主题名称数组
获取已注册的主题名称列表
const themeNames = themeManager.getThemeNames(); // ['light', 'dark', 'blue'] Copy
const themeNames = themeManager.getThemeNames(); // ['light', 'dark', 'blue']
主题名称
是否已注册
检查主题是否已注册
if (themeManager.hasTheme('dark')) { themeManager.toggle('dark');} Copy
if (themeManager.hasTheme('dark')) { themeManager.toggle('dark');}
事件类型
监听器函数
移除事件监听器
themeManager.off('themeChange', myListener); Copy
themeManager.off('themeChange', myListener);
添加事件监听器
themeManager.on('themeChange', (name, data) => { console.log('主题变更:', name);}); Copy
themeManager.on('themeChange', (name, data) => { console.log('主题变更:', name);});
主题变量
注册主题
themeManager.register('dark', { '--bg-color': '#1a1a1a', '--text-color': '#ffffff'}); Copy
themeManager.register('dark', { '--bg-color': '#1a1a1a', '--text-color': '#ffffff'});
主题对象
批量注册主题
themeManager.registerBatch({ light: { '--bg-color': '#ffffff' }, dark: { '--bg-color': '#1a1a1a' }}); Copy
themeManager.registerBatch({ light: { '--bg-color': '#ffffff' }, dark: { '--bg-color': '#1a1a1a' }});
主题名称，不传或传 null 则清除主题
切换主题
themeManager.toggle('dark'); // 切换到暗色主题themeManager.toggle(); // 清除主题 Copy
themeManager.toggle('dark'); // 切换到暗色主题themeManager.toggle(); // 清除主题
卸载主题
themeManager.unregister('old-theme'); Copy
themeManager.unregister('old-theme');
新的基础变量
更新基础变量
themeManager.updateBaseVariables({ '--font-family': 'Arial, sans-serif'}); Copy
themeManager.updateBaseVariables({ '--font-family': 'Arial, sans-serif'});
Description
基于 CSS variables 与 DOM 的主题管理器
Example