AI取名大师 | uni-app + Wot UI 跟随设备自动切换明暗主题
关于 AI 取名大师
借助豆包、通义千问、DeepSeek 等 AI 大模型，为您的宝宝、宠物、店铺、网名、笔名、项目、产品、服务、文章等取一个专业、有意义的名字😄。
开源地址：👉GitCode（国内友好）👈、👉GitHub👈
技术组合：Bun.js、Elysia.js、uni-app
体验地址：AI取名大师（H5版）
特别注明：本系列文章仅为实战经验分享，并记录开发过程中碰到的问题😄，如有不足之处欢迎随时留言提出。
📣 问题简述
运行程序时，偶尔会碰到明亮、暗黑主题错乱的问题（如下图），要么是背景 light 而组件 dark，或者是背景 dark 而组件 light，非常影响视觉效果😂。
🤔 原因分析
程序使用 pinia 状态库记录是否启用暗黑主题，参考的是 snail-uni 模板 的做法。
export const useUIStore = defineStore('ui', {state:()=>({dark: false}),actions: {setDark (v){if(this.dark == v) returnthis.dark = v}},unistorage: true
})
整体流程如下：
- 应用
onLaunch：通过uni.onThemeChange监听主题变更以更新状态库的dark值 - 页面根据
dark的值设置明暗主题 dark值变动后页面也跟着变换主题
这看起来是很正常的一个逻辑，但是在以下情况就出问题了：
- 状态库
dark的值是true - 系统的外观为
浅色 - 此时打开页面就会出现：背景浅色而组件深色😔
- 反之就是背景深色而组件浅色
究其原因就是页面加载时没有判断dark的值与当前系统外观是否一致。
🛠️ 修复
找到原因后，我们对症下药：页面加载后直接更新外观值，而不仅限于uni.onThemeChange
// App.vue
<script setup>import { updateToken } from '@U'import { useUIStore, useDataStore } from '@/store'const uiStore = useUIStore()const dataStore = useDataStore()const updateTheme = ({ theme }) => {uiStore.setDark(theme == 'dark')}onLaunch(() => {const info = uni.getSystemInfoSync()let theme = info.osTheme || info.hostThemeupdateTheme({ theme })uni.onThemeChange(updateTheme)})
</script>
在页面中使用：
<template><view :class="{ 'wot-theme-dark': uiStore.dark }" :style="style"></view>
</template><script setup>import { useUIStore } from '@/store'const uiStore = useUIStore()
</script>
❓ 扩展思考
经过上面的调整，能够实现随系统自动切换外观配色，那有没有可能由用户自己选择吗？
目前还没有想到好的解决办法，因为出现应用与系统外观不一致的话，就会复现上面的问题😔。我观察了下，主流的 uni-app 模板也都是跟随系统。
如果各路大神有好的思路请留言😄。