vue-cli3,vue+elementui实现用户自定义主题色,切换主题,(2023-02-10增加功能:后台可配置主题色以及功能色)

自定义主题色包含以下两种,并且这两种的主题色需要同步

  1. element-ui的主题色
  2. 程序员自己写的样式中的主题色

我参考

  1. 一篇博客:vue,elementUI切换主题,自定义主题 - 小兔额乖乖 - 博客园
  2. 一个开源框架:腾讯的tDesign搭建的开源框架——TDesign Vue Next Starter

输出了此篇文章

说明1:小兔额乖乖文章中的项目示例,在修改主题色后,刷新一下,鼠标hover时会有问题,此问题在本篇文章中已经解决

说明2:我曾经尝试完全模仿腾讯那个框架的思路。但是此思路不适用于element-ui这个框架,会报错

说明3:下面的正文中,项目中修改主题色时,会运行  document.head.appendChild(style)  ,修改一次颜色就会添加一个stylesheet,有兴趣的同学可以优化一下,改成替换掉上一次的style。

你可能感兴趣的:(vue+element-ui,vue.js,elementui)