geg-gas-web/src/utils/theme.ts

/**
 * 主题样式
 */
export interface ThemeCss {
    class?: string;
    backColor: string;
    textColor?: string;
    borderColor: string;
    hoverColor: string;
    hoverTextColor?: string;
    activeColor: string;
    activeTextColor?: string;
}

/**
 * 主题详情
 */
export class ThemeInfo {
  name: string;
  css: ThemeCss;

  constructor(name: string, css: ThemeCss) {
    this.name = name;
    this.css = css;
  }
};

export const ThemeType = {
  PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
  LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
}

/*--menu-top-active-color*/


export class AppThemeType {

  info: ThemeInfo | undefined = undefined;
  app: HTMLElement | undefined | null = undefined;

  setTheme(theme?: ThemeInfo):boolean {
    let old = this.info!=undefined?this.info.name:null;
    if(theme==undefined){
        this.info = ThemeType.PRIMARY;
    }else{
      if(old && old == theme.name){
         return false;
      }
      this.info = theme;
    }
    localStorage.setItem('themeType', this.info.name);
    //删除旧的class
    if(old && old != undefined && old != null){
      this.app?.classList.remove(ThemeType[old].css.class);
    }
    //添加新的主题样式
    this.app?.classList.add(this.info.css.class);
    //顶部菜单样式
    this.setCssVar('--menu-top-bg-color', this.info.css.backColor);
    this.setCssVar('--menu-top-color', this.info.css.textColor);
    this.setCssVar('--menu-top-active-bg-color', this.info.css.activeColor);
    this.setCssVar('--menu-top-active-color', this.info.css.activeTextColor);
    this.setCssVar('--menu-top-hover-bg-color', this.info.css.hoverColor);
    this.setCssVar('--menu-top-hover-color', this.info.css.hoverTextColor);

    //左边菜单主题样式
    this.setCssVar('--menu-left-bg-color', this.info.css.backColor);
    this.setCssVar('--menu-left-color', this.info.css.textColor);
    this.setCssVar('--menu-left-active-bg-color', this.info.css.activeColor);
    this.setCssVar('--menu-left-active-color', this.info.css.activeTextColor);
    this.setCssVar('--menu-left-hover-bg-color', this.info.css.hoverColor);
    this.setCssVar('--menu-left-hover-color', this.info.css.hoverTextColor);

    //其他主题样式
    this.setCssVar('--other-theme-bg-color', this.info.css.backColor);
    this.setCssVar('--other-theme-color', this.info.css.textColor);
    this.setCssVar('--other-theme-active-bg-color', this.info.css.activeColor);
    this.setCssVar('--other-theme-active-color', this.info.css.activeTextColor);
    this.setCssVar('--other-theme-hover-bg-color', this.info.css.hoverColor);
    this.setCssVar('--other-theme-hover-color', this.info.css.hoverTextColor);
    return true;
  }

  getTheme() {
    return this.info;
  }

  setCssVar(prop: string, val: any) {
    document.documentElement.style.setProperty(prop, val);
  }

  init() {
    this.app = document.getElementById('app');
    let themeType = localStorage.getItem('themeType');
    if (!themeType){
        this.setTheme();
    }else{
       this.setTheme(ThemeType[themeType]);
    }
  }
}
  

export const AppTheme = {

  /**@type {ThemeInfo | undefined} */
  info:undefined,  
  app:undefined,

  setTheme:function(theme: ThemeInfo) {
    let old = this.info!=undefined?this.info.name:null;
    if(old && old !== theme.name){
       this.app?.classList.remove(`lng-theme-${old}`);
    }
    this.info = theme;
    localStorage.setItem('themeType', theme.name);
    let classList = this.app?.classList;
    if(classList){
       for(let i=0;i<classList.length;i++){
         if(classList[i].startsWith('lng-theme-')){
           this.app?.classList.remove(classList[i]);
           break;
         }
       }
    }
    this.app?.classList.add(theme.css.class);
  },
  getTheme:function() {
    return this.info;
  },
  getThemeCss:function() {
    return this.info.css;
  },
  init:function() {
    this.app = document.getElementById('app');
    let themeType = localStorage.getItem('themeType') || 'PRIMARY';
    this.info = ThemeType[themeType];
    this.setTheme(this.info);
  },
  setCssVar(prop: string, val: any) {
    document.documentElement.style.setProperty(prop, val);
  }

}