uniapp实现主题切换

本文介绍了如何使用vuex和全局scss在uni-app中实现主题切换功能。通过设置白天和暗黑两种主题,并在vuex中管理,配合静态文件夹存放不同主题的图片,实现了灵活的主题切换。同时,对于顶部状态栏颜色的调整,可以参考5+API进行定制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要的思路就是通过vuex,全局scss实现

例如主题分为 白天和暗黑主题(light/dark)
vuex

new Vuex.Store({
	state: {
		vuex_theme: uni.getStorageSync('vuex_theme') ? uni.getStorageSync('vuex_theme') : 'light'
	},
	mutations: {
		changeTheme(state, theme) {
			state.vuex_theme = theme;
			uni.setStorageSync('vuex_theme', theme);
		}
	}
})

全局scss/theme.scss

$white: #FFFFFF;
$dark: #000000;

.light {
	background: $dark;
	color: $white;
}
.dark {
	background: $white;
	color: $dark;
}

使用,如果更换主题需要换图片,直接在静态文件目录新增两个文件夹,命名为(light-images/dark-images),比如在一个.vue的文件中

<template>
	<view :class="vuex_theme">
		<image :src="`${vuex_theme}-images/1.png`" />
	</view>
</template>

如果需要修改顶部状态栏颜色,可参考5+api

// #ifdef APP-PLUS
plus.navigator.setStatusBarBackground("需要设置的颜色值");
// #endif

以上提供一个参考思路

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值