export const themes: any = {
  dark: {
    '--color': '#bdc7db',
    '--color-title': '#e3e8f4',
    '--color-desc': '#617b91',
    '--color-gray': '#4f5b75',
    '--color-background': '#1e2430',
    '--color-background-active': '#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': '#dad7d7',
    '--color-scrollbar-hover': '#e5e5e5',
    '--td-component-border': '#42516c',
    '--color-background-editor': '#181b24',
    '--color-border-editor': '#1e2430',
    '--color-border-popup': 'transparent',
    '--shadow-popup': 'none',
  },
  light: {
    '--color': '#595959',
    '--color-title': '#262626',
    '--color-desc': '#8c8c8c',
    '--color-gray': '#bfbfbf',
    '--color-background': '#ffffff',
    '--color-background-active': '#f7f8f9',
    '--color-background-hover': '#181f29',
    '--color-background-input': '#303746',
    '--color-background-popup': '#ffffff',
    '--color-background-popup-hover': '#454f64',
    '--color-border': '#000000',
    '--color-border-input': '#535f79',
    '--color-border-input-hover': '#454f64',
    '--color-scrollbar': '#dad7d7',
    '--color-scrollbar-hover': '#e5e5e5',
    '--td-component-border': '#42516c',
    '--color-background-editor': '#181b24',
    '--color-border-editor': '#1e2430',
    '--color-border-popup': '#dddddd',
    '--shadow-popup': '0 5px 8px 0px rgb(0 0 0 / 10%)',
  },
};

export function switchTheme(themeName: string) {
  let theme = themes[themeName];
  for (let key in theme) {
    document.documentElement.style.setProperty(key, theme[key]);
  }
}
