vue+less 通过切换变量改变主题

描述：

前段时间自己开发的一个手机端音乐项目的时候遇到一个问题，如何用vue脚手架+less修改变量的方式去改变项目的主题色。
有看过ElementUI 和Vant里面的一些教程，需要安装其他依赖插件，然后配置Webpack相关的配置，稍微的有一些麻烦。
然后又看过 使用 css/less 动态更换主题色（换肤功能）这个文档讲的还挺细的，如果感兴趣的可以去看一看学一学。

而我，今天要讲的是一个类似上面文章里最后一个的 css 变量方法，但我的实现方式跟他的有一点不同。
我是把主题色css文件

---

解决方案：

首先准备两个主题色文件例如：white.css和black.css，里面内容可以定义该主题下的 背景颜色、选中颜色、字体颜色、字体描述颜色之类的，大致如下。

/* white.css */
:root {
  --color-background: #f5f5f5;
  --color-background-d: rgba(245,245,245, .7);
  --color-text: #000;
  --color-text-d: rgba(0,0,0,.5);
}

/* black.css */
:root {
  --color-background: #222;
  --color-background-d: rgba(0,0,0, .3);
  --color-text: #fff;
  --color-text-d: rgba(255, 255, 255, 0.3);
}

然后在脚手架的根目录下index.html文件的head里添加进一个默认主题色文件，我这里就默认是个白色的主题

<link id="Themes" rel="stylesheet" href="./static/themes/white.css">

完成了之两个步骤之后需要写一个Themes.less文件去把css变量导入到Less变量里。

@color-background: var(--color-background);
@color-background-d: var(--color-background-d);
@color-text: var(--color-text);
@color-text-d: var(--color-text-d);

然后写一个公共方法 ChangeThemes。

export function ChangeThemes(theme) {
	if(['white','black'].includes(theme)) {
		document.getElementById('Themes').href = `static/themes/${theme}.css`
	}
}

然后就可以在任意组件里面随意无缝切换样式了。
到这里可能有的人会说为什么不直接写一个white.less然后从index.html里导入进去，然后再修改head里link标签的href路径呢。因为那种方式的话就要通过script标签去导入Less.min.js了，而且这种方式不可行，是因为Less的机制问题，他只是一个解析器，将自己的规则解析成css，所以他只会在文档流从上往下加载时解析一次，你再怎么去切换Link标签里的href路径他解析出来的还是第一次解析出来的css，目前还不知道有没有方法能让他重新将整个文档流的less重新解析一遍。