需求：网站换肤，主题切换。网站的主题色可以在几种常用颜色之间进行切换，还有相关图片、图标也要跟随主题进行切换。

不多说，先看下最终的实现效果：

文章由两部分组成：css切换，图片图标切换

钢性铸铁切换

1.在静电目录下新建一个风格文件夹，在风格下新建一个主题。结构化布线系统文件（项目使用了萨斯，会自动编译成钢性铸铁文件，如果没有使用这些预处理工具可以直接新建theme.css)，将需要替换的半铸钢钢性铸铁(铸造半钢)声明在此文件中。主题-测试-BTN {底色： # 409 eff边框颜色： # 409 eff}.主题-测试-btn:hover .主题-测试-BTN :对焦{底色： # 66b1ff边框颜色： # 66b 1 ff}2.在src/assets/js/const/目录下新建主题-colors.js，用于声明所有可选的主题，每种颜色都对应一个关键词，方便区分

const colors=[{ themid : 0，primaryBtn: '#409eff '，//主要按钮的背景色priBtnHover: '#66b1ff '，//主要按钮的悬浮、聚焦背景色}，{ themeId: 1，primaryBtn: '#67c23a '，priBtnHover: '#85ce61 '，}，{ themeId: 2，primaryBtn: '#e6a23c '，priBtnHover: '#ebb563 '，}，]；导出默认颜色；3.通过创建交互式、快速动态网页应用的网页开发技术获取主题。css，将颜色值替换为关键词。

data() { return { active: 0，themeStyleStr: ' '，//存放替换成关键词的主题。钢性铸铁内容颜色：主题颜色，//所有可选的主题颜色数组。即：主题colors.js文件出口的数组};},已安装(){ //通过创建交互式、快速动态网页应用的网页开发技术获取主题。钢性铸铁的内容，并将颜色值替换为关键词这个$ http.getThemeFile().然后(RES={ this。themsetstylestr=this。getstyle template(RES)；});}，methods: { //获取样式模板：将颜色值替换为关键词getStyleTemplate(数据){让颜色=这个。颜色[0]；删除颜色.主题标识让彩色地图={ }；Object.keys(颜色)。forEach(key={ color map[color[key]]=key；});对象键（颜色映射)。forEach(key={ data=data。替换(新的RegExp(键，‘ig’)，颜色映射[键])；});返回数据；},}这个$http.getThemeFile .方法//使用原生创建交互式、快速动态网页应用的网页开发技术获取换肤的样式文件getThemeFile(){ 0返回新的承诺(解析={ const URL=位置。origin '/静态/风格/主题。CSS '；const xhr=new XMlhttprequest()；xhr。onreadystatechange=()={ if(xhr。readystate===4 xhr。status===200){ resolve(xhr。response text)；} };xhr.open('GET '，URL)；xhr。send()；});}4.把关键词再换回刚刚生成的相应的颜色值，并在页面上添加风格标签

methods: { //点击切换主题更改主题(索引){ this。active=索引；这个。setnewstyle(这个。主题风格字符串，这个。颜色[索引])；}, //根据选择的主题颜色，把关键词换成相应的主题颜色，并在页面上添加风格标签setNewStyle(originalStyle，colors){ let oldEl=document。getelementbyid('主题样式')；让CSS text=originalstyleobject . keys(颜色)。forEach(key={ cstext=cstext。替换(新的RegExp(键，' ig ')，colors[键])；});const style=文档。创建元素(“样式”)；' style . innerhtml=csstextstyle . id='主题-风格'；oldEl？文件。头部。替换子(样式，oldEl):文档。头部。appendchild(样式)；}}图片图标切换

1.图片切换和图标切换是同样的原理。在之前新建好的主题。结构化布线系统文件追加图标引入的样式。主题-测试-图标{背景： URL('/静态/图片/常用/列表-修改-图标。' SVG '；}2.在之前新建好的主题颜色。射流研究…文件追加图标路径

/*图片统一使用一条路径。更改主题时，您需要在images文件夹下创建一个新的主题文件夹，该文件夹对应于原始路径。图片的文件名必须一致。应该避免primaryBtn和primaryBtnHover同时出现，因为primaryBtn的常规匹配会匹配primaryBtnHover部分，无法达到效果*/

const colors=[{ themid : 0，primarybtn:' # 409eff '，//主按钮的背景色为priBtnHover: '#66b1ff '，//主按钮的浮动和对焦背景色为imagepath:'/static/images '，//图片的绝对路径}，{ themeid: 1，primarybtn3360' # 67c23a '，pribtnhover 3360 ' # '导出默认颜色；3.介绍需要切换主题的图片/图标，存储在/static/images/下。每个附加的主题图片都需要存储在一个文件夹中，例如/them 1或/them 2。

注意：每个主题的文件名应保持不变；影像路径根据theme.scss中引入影像风格的路径确定，可根据项目实际情况进行调整。

摘要

以上是边肖给大家介绍的Vue项目的方案分析。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！