visualization-design/src/services/theme.ts

import { changeTheme } from './echarts';

export const themes: any = {
  dark: {
    '--color': '#bdc7db',
    '--color-title': '#e3e8f4',
    '--color-desc': '#617b91',
    '--color-gray': '#4f5b75',
    '--color-background': '#1e2430',
    '--color-background-active': '#121924',//'#161f2c',
    '--color-background-hover': '#181f29',
    '--color-background-input': '#303746',
    '--color-background-popup': '#303746',
    '--color-background-popup-hover': '#454f64',
    '--color-border': '#000000',
    '--color-border-input': '#535f79',
    '--color-border-input-hover': '#454f64',
    '--color-scrollbar': '#535F79',
    '--color-scrollbar-hover': '#e5e5e5',
    '--td-component-border': '#42516c',
    '--color-background-editor': '#080b0f',
    '--color-border-editor': '#1e2430',
    '--color-border-popup': 'transparent',
    '--shadow-popup': 'none',
    '--td-bg-color-component':'#535f79',
    '--color-background-groups':'#1e2430',
    '--color-background-views-hover':'#3E4D6B',
    '--color-switch-handle':'#bdc7db',
  },
  light: {
    '--color': '#737A8A', //'#595959',
    '--color-title':'#666D79',// '#262626',
    '--color-desc': '#8c8c8c',
    '--color-gray': '#bfbfbf',
    '--color-background': '#ffffff',
    '--color-background-active':'#FFFFFF', //'#f7f8f9',
    '--color-background-hover': '#EFF1F6',
    '--color-background-input': '#F2F4F8',
    '--color-background-popup': '#ffffff',
    '--color-background-popup-hover': '#EFF1F6',//'#454f64',
    '--color-border': '#f0f1f2',
    '--color-border-input': '#e5e5e5',
    '--color-border-input-hover': '#dcdcdc',
    '--color-scrollbar': '#dad7d7',//2
    '--color-scrollbar-hover': '#e5e5e5',//1
    '--td-component-border': '#f3f3f3',
    '--color-background-editor': '#f0f1f2',
    '--color-border-editor': '#c6c6c666' ,//'#1e2430',
    '--color-border-popup': '#dddddd',
    '--shadow-popup': '0 5px 8px 0px rgb(0 0 0 / 10%)',
    '--td-bg-color-component':'#F7F8FA',
    '--color-background-groups':'#F7F8FA',
    '--color-background-views-hover':'#EFF1F6',
    '--color-switch-handle':'#fff'
  },
};

export function switchTheme(themeName?: string) {
  //编辑器样式
  let theme = themes[themeName||'dark'];
  for (let key in theme) {
    document.documentElement.style.setProperty(key, theme[key]);
  }
  
  //echarts样式（系统组件-图表） 
  changeTheme(`le-${themeName||'dark'}`);

  //系统组件其他图元样式？
  
  //画布中的图元？

  //画布样式
  let options:any = {
    ruleColor:'#222E47',
    background: '#1e2430',
    color: '#bdc7db',
    ruleOptions:{
      background:'#121924',
      textColor:'#6E7B91'
    },
  }
  if(themeName === 'light'){
    options = {
      ruleColor:'#C8D0E1',
      background: '#fff',
      color: '#000',
      ruleOptions:{
        background:'#F7F8FA',
        textColor:'#C8D0E1'
      },
    }
  }
  // meta2d?.setOptions(options);
  // meta2d?.render();
  localStorage.setItem('le-theme', themeName||'dark');
}