Class ThemeManager

Description

基于 CSS variables 与 DOM 的主题管理器

Example

const theme = new ThemeManager({
  baseVariables: { '--scope-font-color': '#212121' }, // 声明基础的公共变量,被所有注册主题继承
  hooks: {
    // 使用hook动态设置主题
    afterSystemThemeChange: (systemTheme) => {
      const currentTheme = theme.getCurrentTheme();
      if (!currentTheme || currentTheme === 'default') {
        theme.unregister('default')
        theme.register('default', ThemeConfig[theme])
        theme.toggle('default')
      }
    }
  }, // 各类hooks监听
});
console.log(theme.systemTheme); // 当前的系统主题
// 主题注册
theme.register('light', {
  '--scope-page-background-color': '#FFFFFF',
}).register('dark', {
  '--scope-page-background-color': 'black',
  '--scope-font-color': '#FFFFFF',
});
theme.toggle('light'); // 切换light主题
theme.toggle(); // 切换为空,不应用任何主题
theme.getCurrentTheme(); // 获取当前使用的主题标识, 例如: 'light'
theme.getThemeData(); // 返回当前使用主题的数据
theme.getThemeData('dark'); // 获取指定主题变量,不提供参数,则默认返回当前使用主题的数据
theme.unregister('purple'); // 移除已注册的主题
theme.destroy(); // 移除主题管理器,释放内部引用资源
Copy