Uniapp项目自定义主题

需求描述

在进行部分手机软件开发过程中，可能会出现需要设计手机主题的状况，最为典型的就是手机游览器提供的黑夜模式与白天模式，需要指出的是uniapp官方提供了darkMode即暗黑主题的插件的，但是在我实际开发中出现了无法在项目中正常使用该插件的状况，所以我们这时候就需要自己来搞一个主题了

设计方案

1.首先在当前项目中创建一个theme文件夹，用来存放我们的自定义主题

2.接着创建一个主题的样式文件，如theme.css/theme.less/theme.sass

3.接着我们在该文件中根据你所使用的样式语言来编写主题样式，例如:

.dark{
	background-color:#1f1f1f;
	color:#ccc;
}

.light{
	background-color: aliceblue;
	color:black;
}

4.回到我们的view组件中，在style样式区导入该主题样式文件，例如:

<style lange=”less” scoped>
	@import '../../theme/theme.less';
	//其他样式照写不误
</style>

5.在template区中我们可以定义一个view 或者直接在当前组件的父view上直接配置动态class

	<view class="content" :class="theme=='dark'?'dark':'light'">
		<topCompontent></topCompontent>
	</view>

6.在script区域定义一个控制主题类别的变量，当然了这个变量可以存放在本地缓存中或者其他你认为合适的地方，总之我们需要一个变量来控制主题

const theme=ref(‘light’);

最后，我们只需要对该变量进行数据操控就可以进行主题切换了，至此一个自定义主题就算是初步完成了