uniapp 实现多皮肤切换思路自己琢磨的请大家留言探讨

静态资源目录如下

app.vue 引入样式文件，切换样式对应不同的皮肤

<style>
	/* 皮肤 */
	@import url("/static/css/red.css");
	/* @import url("/static/css/yellow.css"); */
	/* @import url("/static/css/blue.css"); */
	@import url("/static/css/common.css");
</style>



yellow.css

page {
	--color:#edd236;
	--light-color:#fdfaeb;
	--border-color:#c4b040;
	--deep-color:#c4b040;
	--bg-1:url(/static/images/yellow/bg-1.jpg);
	--bg-2:url(/static/images/yellow/bg-2.jpg);
	--bg-3:url(/static/images/yellow/bg-3.jpg);
	--bg-4:url(/static/images/yellow/bg-4.jpg);
	--bg-5:url(/static/images/yellow/bg-5.jpg);
	--back:url(/static/images/yellow/back.png);
	--close:url(/static/images/yellow/close.png);
	--home:url(/static/images/yellow/home.png);
	--link-item:url(/static/images/yellow/link-item.png);
	--path-line:url(/static/images/yellow/rout-line.png);
	--squ-left:url(/static/images/yellow/squ-left.png);
	--cloud:url(/static/images/yellow/cloud.png);
	--menu1:url(/static/images/yellow/menu1.png);
	--menu2:url(/static/images/yellow/menu2.png);
	--tag:url(/static/images/yellow/tag.png);
	--book:url(/static/images/yellow/book.png);
	--next:url(/static/images/yellow/next.png);
	--play:url(/static/images/yellow/play.png);
	--prev:url(/static/images/yellow/prev.png);
	--audio:url(/static/images/yellow/audio.png);
}
.course-cell .c-header{
	color: #FFFFFF!important;
}








blue.css


page {
	--color:#20b7ff;
	--light-color:#e8f8ff;
	--border-color:#78c4e9;
	--deep-color:#187eae;
	--bg-1:url(/static/images/blue/bg-1.jpg);
	--bg-2:url(/static/images/blue/bg-2.jpg);
	--bg-3:url(/static/images/blue/bg-3.jpg);
	--bg-4:url(/static/images/blue/bg-4.jpg);
	--bg-5:url(/static/images/blue/bg-5.jpg);
	--back:url(/static/images/blue/back.png);
	--close:url(/static/images/blue/close.png);
	--home:url(/static/images/blue/home.png);
	--link-item:url(/static/images/blue/link-item.png);
	--path-line:url(/static/images/blue/rout-line.png);
	--squ-left:url(/static/images/blue/squ-left.png);
	--cloud:url(/static/images/blue/cloud.png);
	--menu1:url(/static/images/blue/menu1.png);
	--menu2:url(/static/images/blue/menu2.png);
	--tag:url(/static/images/blue/tag.png);
	--book:url(/static/images/blue/book.png);
	--next:url(/static/images/blue/next.png);
	--play:url(/static/images/blue/play.png);
	--prev:url(/static/images/blue/prev.png);
	--audio:url(/static/images/blue/audio.png);
}




red.css


page {
	--color:#ea514c;
	--light-color:#fdeded;
	--border-color:#faaeaa;
	--deep-color:#862f2d;
	--bg-1:url(/static/images/red/bg-1.jpg);
	--bg-2:url(/static/images/red/bg-2.jpg);
	--bg-3:url(/static/images/red/bg-3.jpg);
	--bg-4:url(/static/images/red/bg-4.jpg);
	--bg-5:url(/static/images/red/bg-5.jpg);
	--back:url(/static/images/red/back.png);
	--close:url(/static/images/red/close.png);
	--home:url(/static/images/red/home.png);
	--link-item:url(/static/images/red/link-item.png);
	--path-line:url(/static/images/red/rout-line.png);
	--squ-left:url(/static/images/red/squ-left.png);
	--cloud:url(/static/images/red/cloud.png);
	--menu1:url(/static/images/red/menu1.png);
	--menu2:url(/static/images/red/menu2.png);
	--tag:url(/static/images/red/tag.png);
	--book:url(/static/images/red/book.png);
	--next:url(/static/images/red/next.png);
	--play:url(/static/images/red/play.png);
	--prev:url(/static/images/red/prev.png);
	--audio:url(/static/images/red/audio.png);
}

common.css

.page-chapter {
	background-image: var(--bg-5);
}
.page-course {
	background-image: var(--bg-4);
}
.page-class{
	background-image: var(--bg-3);
}
.page-active{
	background-image: var(--bg-2);
}
.page-detail{
	background-image: var(--bg-1);
}
.ac-back{
	background-image: var(--back);
}
.ac-close{
	background-image: var(--close);
}
.ac-home{
	background-image: var(--home);
}