vue elementUI 主题颜色切换 基础篇

产品需求是添加浅色和深色两个配色切换，且记住用户上次设置的颜色。

  

 

 

 

 前端是 elementUI做的，项目内已经添加了SCSS。

个人理解：通过用户操作改变元素类名加载实现不同的样式。控制颜色改变，如果这样实现的话，不仅仅可以实现浅色和深色的配置。记住用户上次设置可以使用LocalStorage存储，在项目加载的时候去取，重新设置

于是上网搜索了 案例，由于时间有点久。参考了不同的方案。找不到当初采用的方案了。现在给一个链接，基本是这个思路。

https://www.cnblogs.com/shaozhu520/p/12801131.html 请先理解这个思路。本方案是这个的扩展

 

前提是 vue scss  style-resources-loader 这三个东西

 

   开始 style-variable-color 文件夹下创建两个主题文件配置 darkTheme.scss 和 lightTheme.scss  这两个文件内变量名一致。配色分别是浅色配色和深色配色

 

 

 

   我个人src下的style,是全局样式。variable文件是 变量文件夹里面存储的是SCSS全局变量 通过vueConfig配置到全局中

 

接下来 在 themeColor.scss 将  darkTheme.scss 和 lightTheme.scss 引入，

这个文件是颜色变量的混合（完成通过类名判断加载颜色变量）。与链接方案中对比，我添加了传入变量功能。通过传参判断需要css代码。减少代码量

 

 

 

 到此，配置功能完成了。接下来是交互实现

注意 ： js 元素的自定义属性是以 data-开头的 。所以我的自定义属性叫 data-theme

最初，我的data-theme属性是放到App.vue 的 app dom下的。因为按照我对vue的单页面理解。vue文件会编译到这个下面的

 

 

但是elementUI的dialog有个属性append-to-body 会导致有些dom元素在app 外部。所以这个属性不能加在 app 上，挂载到bodys上是最保险的。

 

 

 

 

 

在App页面 的created 的生命周期上通过js 动态给 body 添加data-theme属性。在需要改变主题的地方重新设置缓存和data-theme 属性就可以实现了。

 

 

这样dom 操作就完成了。最后就是在页面写css样式了

 

在你的 .vue文件的scss中直接调用这些混合即可。

 

也是可以根据主题切换图片的

 

 

 

 

 

 

 

 

 

 

 

到此。主题切换功能就实现了。 但是要实现产品需求这样选择框和弹出框也统一的样式。势必要修改elementUI样式。