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 模板的做法。

js 复制代码

export const useUIStore = defineStore('ui', {
    state:()=>({
        dark: false
    }),
    actions: {
        setDark (v){
            if(this.dark == v)  return

            this.dark = v
        }
    },
    unistorage: true
})

整体流程如下：

应用 onLaunch：通过 uni.onThemeChange 监听主题变更以更新状态库的 dark 值
页面根据dark的值设置明暗主题
dark 值变动后页面也跟着变换主题

这看起来是很正常的一个逻辑，但是在以下情况就出问题了：

状态库dark的值是true
系统的外观为浅色
此时打开页面就会出现：背景浅色而组件深色😔
反之就是背景深色而组件浅色

究其原因就是页面加载时没有判断dark的值与当前系统外观是否一致。

🛠️ 修复

找到原因后，我们对症下药：页面加载后直接更新外观值，而不仅限于uni.onThemeChange

js 复制代码

// 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.hostTheme
        updateTheme({ theme })

        uni.onThemeChange(updateTheme)
    })
</script>

在页面中使用：

html 复制代码

<template>
    <view :class="{ 'wot-theme-dark': uiStore.dark }" :style="style">
    </view>
</template>

<script setup>
		import { useUIStore } from '@/store'
		const uiStore = useUIStore()
</script>

❓ 扩展思考

经过上面的调整，能够实现随系统自动切换外观配色，那有没有可能由用户自己选择吗？

目前还没有想到好的解决办法，因为出现应用与系统外观不一致的话，就会复现上面的问题😔。我观察了下，主流的 uni-app 模板也都是跟随系统。

如果各路大神有好的思路请留言😄。