Vue<主题色修改>

效果图：

  changeColor.gif
此篇文章是基于vue项目上进行修改的，在其他项目中也是可以实现这种效果的。

知识点：

1. :root 选择器
2. .setProperty属性

??首先创建一个 .scss 文件(其实用 .css 文件也是可以的)

  image.png
index.scss 代码

import '@/assets/css/index.scss'

?? （ 完整页面代码，直接往下翻 ~~~~~ ）

??引用全局配置的 css 变量

  image.png
然后 document 获取到 :root，通过 .setProperty 直接修改定义的 css 变量属性的值，就能直接改变主题颜色