前端 vue 实现不同用户提供不同主题色的

Posted 2023-04-12

参考技术A 快速说下思路：

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

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

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

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

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

样式变量定义

样式变量使用

样式变量修改

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

前端切换主题颜色的几种思路

参考技术A 如果主题提前配置好是固定的：
1.采用配置不同theme的css文件，使用scss+替换body的class命名空间进行样式覆盖

setting.scss

common.scss

最后形成两个主题文件后，修改body的class就可达到切换主题的目的

2.引用不同的link文件，与上述同理先形成css文件，通过动态改变link引用达到切换主题目的

如果主题不固定的，可借用webpack插件：webpack-theme-color-replacer实现：
vue-cli3配置

app-config.js文件

配置babel.config.js

在utils文件中定义一个themeColorClient.js 用于初始化主题色和记录主题色

除了修改elementUI主题色之外，我们还需要配置其他自己写的样式，需要用到element ui中定义的一些变量
可通过引用@import "../../../node_modules/element-ui/packages/theme-chalk/src/common/var.scss"; 获得element-ui中的变量，并使用，这样可达到一起切换主题效果