dynamic theme with element-plus doesn't work well

// vite.config.ts
export function createThemePlugin() {
  const themePlugin: Plugin[] = themePreprocessorPlugin({
    // 创建动态主题切换
    scss: {
      // 启用任意主题色模式
      arbitraryMode: true,
      // 默认的主题色，用于对其他颜色值形成对比值，通常与 src/theme/theme-vars.less 中的一个主题色相同，也可以不相同，就看是不是你想要的效果
      defaultPrimaryColor: '#78d890',
      // 只需提供一组变量文件，变量文件内容不应该夹带样式代码，设定上只需存在变量

      multipleScopeVars: [
        {
          scopeName: 'theme-default',
          path: path.resolve('src/theme/theme-vars.scss'),
        },
        // {
        //   scopeName: 'dark',
        //   path: resolve('src/theme/dark.scss'),
        // },
      ],

      // css中不是由主题色变量生成的颜色，也让它抽取到主题css内，可以提高权重
      includeStyleWithColors: [
        {
          color: '#ffffff',
          // 此类颜色的是否跟随主题色梯度变化，默认false
          // inGradient: true,
        },
      ],
    },
  })
  return themePlugin
}

// theme-vars.scss
$--colors: (
  'primary': (
    'base': #78d890,
  ),
  'success': (
    'base': #21ba45,
  ),
  'warning': (
    'base': #f2711c,
  ),
  'danger': (
    'base': #db2828,
  ),
  'error': (
    'base': #db2828,
  ),
  'info': (
    'base': #42b8dd,
  ),
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: $--colors
);

$bg:'#897987'

propblem1: the custom var $bg was used in other pages, it don't change when

 setCustomTheme({
    Color,
    primaryColor: color.value,
    //gradientReplacer:{},
    //targetValueReplacer:{}
  })

problem2:element-plus Button primary color doesn't change

GitOfZGT / vite-plugin-theme-preprocessor

dynamic theme with element-plus doesn't work well #26