uniapp主题切换功能，适配H5、小程序

实现方法

方法	性能消耗	维护成本	适用场景
内联样式	较高	低	小程序
CSS变量+属性选择器	低	中	H5
混合方案	中等	低	跨平台项目

优势特点

性能优化：
1. H5端使用CSS原生变量切换
2. 小程序端使用高效样式字符串生成
3. 切换动画流畅
维护性提升
1. 主题配置集中管理
2. 新增主题只需要拓展vars对象

使用pinia管理主题

第一步、定义主题和CSS变量

state: () => {return {mode: uni.getStorageSync('theme') || 'light',vars: {light: { '--primary': '#007AFF', '--bg': '#FFFFFF' },dark: { '--primary': '#0BB640', '--bg': '#1A1A1A' },},}
},

第二步、实现主题切换方法

  actions: {// 统一切换入口toggle(themeMode) {// 判断是否传递主题，如果没有则在dark和light之间切换if (themeMode) {this.mode = themeMode} else {this.mode = this.mode === 'light' ? 'dark' : 'light'}// 本地存储uni.setStorageSync('theme', this.mode)},}

第三步、实现原生组件适配

  actions: {// 原生组件适配updateNative() {// 判断终端类型const isMP = process.env.UNI_PLATFORM?.startsWith('mp-')const vars = this.vars[this.mode]if (isMP) {// 设置顶部导航栏样式uni.setNavigationBarColor({backgroundColor: vars['--bg'],frontColor: this.mode === 'dark' ? '#ffffff' : '#000000',})// code……}},}

第四步、H5根属性更新

actions: {// H5根属性更新updateRootAttribute() {const isH5 = process.env.UNI_PLATFORM === 'h5'if (isH5) {// 更新HTML中的data-theme属性标识document.documentElement.setAttribute('data-theme', this.mode)}},
},

完整代码

import { defineStore } from 'pinia'export const useThemeStore = defineStore('theme', {state: () => {return {mode: uni.getStorageSync('theme') || 'light',vars: {light: { '--primary': '#007AFF', '--bg': '#FFFFFF' },dark: { '--primary': '#0BB640', '--bg': '#1A1A1A' },},}},actions: {// 统一切换入口toggle(themeMode) {if (themeMode) {this.mode = themeMode} else {this.mode = this.mode === 'light' ? 'dark' : 'light'}uni.setStorageSync('theme', this.mode)// 多端样式更新this.updateNative()// #ifdef H5this.updateRootAttribute()// #endif},// 原生组件适配updateNative() {const isMP = process.env.UNI_PLATFORM?.startsWith('mp-')const vars = this.vars[this.mode]if (isMP) {uni.setNavigationBarColor({backgroundColor: vars['--bg'],frontColor: this.mode === 'dark' ? '#ffffff' : '#000000',})}},// H5根属性更新updateRootAttribute() {const isH5 = process.env.UNI_PLATFORM === 'h5'if (isH5) {document.documentElement.setAttribute('data-theme', this.mode)}},},
})

定义CSS变量

定义CSS变量，H5中使用

/* 多端兼容方案 */
:root {// 默认主题（编译时注入小程序）--primary: #007aff;--bg: #ffffff;
}// H5动态主题（运行时切换）
@media all {[data-theme='light'] {--primary: #007aff;--bg: #ffffff;}[data-theme='dark'] {--primary: #0bb640;--bg: #1a1a1a;}
}

在App.vue中导入使用

<style lang="scss">
@import '@/styles/index.scss';
</style>

创建一个Hook

通过Hook来管理主题的切换、样式格式化等，避免重复导入Store

import { computed } from 'vue'
import { useThemeStore } from '@/stores/theme'export const useTheme = () => {const themeStore = useThemeStore()// 响应式主题变量const themeVars = computed(() => {const result = {// 小程序端需要转换的样式mpStyle: null,// H5数据属性dataTheme: themeStore.mode,}if (isMP.value) {result.mpStyle = Object.entries(themeStore.vars[themeStore.mode]).map(([k, v]) => `${k}:${v}`).join(';')}return result})const isMP = computed(() => process.env.UNI_PLATFORM?.startsWith('mp-'))return {isMP,toggle: themeStore.toggle, // 切换方法currentMode: computed(() => themeStore.mode), // 当前模式themeVars, // 样式绑定对象}
}

在组件中使用

最主要的代码是：:style="{ ...themeVars.mpStyle }"，这样就可以实现在小程序主题切换时变量自动更新

<template><view class="container" :style="{ ...themeVars.mpStyle }"><view class="w-150px box"><text>主题切换测试</text><text class="iconfont icon-sousuo"></text><button type="primary" @tap="() => toggle()">切换主题</button></view></view>
</template>
<script setup>
import { useTheme } from '@/Hooks/useTheme'const { themeVars, toggle } = useTheme()
</script>
<style lang="scss" scoped>
.container {.box {background-color: var(--bg);font-size: 18px;font-weight: 500;line-height: 32px;color: var(--primary);}
}
</style>

主题初始化

在App.vue文件中添加如下代码

onLaunch(() => {// 主题初始化const savedTheme = uni.getStorageSync('theme')if (savedTheme) {themeStore.toggle(savedTheme)}
})

优化拓展

添加transition

在css或scss文件中添加如下代码，使主题切换时更加流畅的过渡，避免生硬切换

* {transition: background-color 0.3s, background 0.3s, color 0.3s;
}

监听系统主题变化

在App.vue文件中使用uni.onThemeChange监听系统主题变化，并同步小程序/H5主题变化

onLaunch(() => {// 监听系统主题变化uni.onThemeChange(({ theme }) => {const systemTheme = theme === 'dark' ? 'dark' : 'light'themeStore.toggle(systemTheme)})
})

新增主题？

如果想要新增主题，只需要在stores/theme.js和style/index.scss文件中添加对应主题的CSS变量，theme.js中定义小程序的主题，index.scss定义H5的主题，如：

state: () => {return {vars: {light: { '--primary': '#007AFF', '--bg': '#FFFFFF' },dark: { '--primary': '#0BB640', '--bg': '#1A1A1A' },red: {// ……新变量}},}
},

// H5动态主题（运行时切换）
@media all {[data-theme='light'] {--primary: #007aff;--bg: #ffffff;}[data-theme='dark'] {--primary: #0bb640;--bg: #1a1a1a;}[data-theme='red'] {/* ……新变量 */}
}