wardrobe/pages/user/index.vue

<template>
	<view class="" :style="{minHeight:infoHeight+'px'}" :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-6' : 'grey text '">
		<tm-menubars title="体验主题切换" color="primary"  :showback="true"></tm-menubars>
		
		<view class="ma-32  ">
			<view  class=" round-8 mb-24 fulled py-n16" 
				:class="$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : 'white'">
				<view class="flex-center flex-col pa-32">
					
					<view class="text-size-lg text-weight-b">更换主题</view>
					<view class="text-size-n py-12">当前:{{$tm.vx.state().tmVuetify.color}},更多主题请查阅官方文档</view>
					
					<view  class="flex">
						<tm-pickers @confirm="change" :default-value="defaultTheme" 
						:list='themeSList' title="请选择主题" btn-color="primary">
							<tm-tags color="primary" size="g" model="text">选择内置主题</tm-tags>
						</tm-pickers>
						<view class="flex-shrink"><tm-tags @click="clearTheme" color="primary" size="g" model="text">恢复默认布局</tm-tags></view>
					</view>
				</view>
			</view>
			
			<view  class=" round-8 mb-24 fulled  py-n16"
				:class="$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : 'white'">
				<view class="flex-center flex-col pa-32">
					
					<view class="text-size-lg text-weight-b">暗黑主题的切换</view>
					<view class="text-size-n py-12">当前:{{$tm.vx.state().tmVuetify.black?'暗黑模式':'亮色模式'}}</view>
					<view class="flex">
						<tm-tags  @click="$tm.theme.setBlack(true)" color="primary" size="g" model="text">切换暗黑</tm-tags>
						<view class="flex-shrink"><tm-tags @click="$tm.theme.setBlack(false)" color="primary" size="g" model="text">切换亮色</tm-tags></view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
				
				defaultTheme:[],
				themeSList:["primary","red","green","blue","pink","orange","yellow","indigo"],
				infoHeight:0
			};
		},
		created() {

			this.defaultTheme = [this.$tm.vx.state().tmVuetify.color||'primary']
			this.infoHeight = uni.getSystemInfoSync().windowHeight
		},
		methods: {
			change(e) {
				this.defaultTheme = [e[0].data]
				this.$tm.theme.setTheme(e[0].data)
			},
			clearTheme(){
				this.$tm.theme.clear();
				this.defaultTheme = ['primary']
			}
		},
	}
</script>

<style lang="scss">

</style>