接到这么一个需求，给公司内部项目组提供数据报表项目。不同项目组需求不同的主题色。这里我用到了 element ui 和 g2 plot 的界面框架。下面就开始！

核心

快速说下思路：

• 定义多个 mian.xxx.js 入口文件，将它们各自的 scss 变量传入
• 通过 eslint 的 multi-page 来生成多个页面入口 html
• 给不同项目组提供带有各自 sass 样式变量的的入口 html 连接即可

通过 vue-cli 定义生成多个页面

因为我用到了 vue-cli，可以直接在 vue.config.js 里面配置多页应用。

// vue.config.js
module.exports = {
  publicPath: '/',
  pages: {
    index: {
      entry: 'src/main.5241.js'
    },
    5242: {
      entry: 'src/main.5242.js'
    }
  },
}

element 修改 scss 变量的方式

在 element 官方文档中有提到通过修改 scss 变量实现自定义主题的方式（https://element.eleme.cn/#/zh-CN/component/custom-theme#zai-xiang-mu-zhong-gai-bian-scss-bian-liang）。

/* 改变主题色变量 */
$--color-primary: #f6674f;
$--table-border-color: #dcdfe6;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import '~element-ui/packages/theme-chalk/src/index';

所以，对于组件库的界面定制化，我直接创建了多个 variables.xxxx.scss 分别定义不同项目组的主题色。

g2 plot 修改颜色数组的方式

在 g2 里面有一个 colors 属性可以用来定义图表颜色，这里我定义了一个函数 —— 通过项目组 ID 来获取相应的颜色色值数组：

export function getChartColorsByGameId (gameId) {
  switch (gameId) {
    case 5241:
      return [
        '#ed786c',
        '#a24c4c',
        '#e3d4ae',
        '#fbb178',
        '#abce65',
        '#c45592',
        '#dd8dee',
        '#8361ad',
        '#8f92f1',
        '#53a5eb',
      ]
    case 5242:
      return [...]
    default:
      break
  }
}

// 在 g2plot 图标配置中使用
const chartColors = getChartColorsByGameId(this.$store.state.gameId)

关于一些自定义的 scss 变量

另外，还有一些 scss 变量是需要我们额外定义的，这时候我用到了一个 CSS 函数 var()，它可以让我们使用 JavaScript 去修改 CSS 变量。

样式变量定义

$--gw-primary-color: var(--primary-color, #f6674f);
$--gw-primary-background-color: var(--primary-background-color, #fef0ed);
$--gw-primary-border-color: var(--primary-border-color, #ffd3cd);

样式变量使用

@import '../../styles/themes.scss';

.module {
  color: $--gw-primary-color;
  background: $--gw-primary-background-color;
}

样式变量修改

// 通过项目组 ID 重新定义样式变量色值
export function resetThemeByGameId (gameId) {
  switch (gameId) {
    case 5241:
      document
        .getElementsByTagName('body')[0]
        .style.setProperty('--primary-color', '#f6674f')
      document
        .getElementsByTagName('body')[0]
        .style.setProperty('--primary-background-color', '#fef0ed')
      document
        .getElementsByTagName('body')[0]
        .style.setProperty('--primary-border-color', '#ffd3cd')
      break
    case 5242:
      ...
      break
    default:
      break
  }
}

最后

以上就是为不同项目组提供不同主题色的个人解决方案啦~有什么问题欢迎讨论。