Feat/theme-darkmode

[Sealt]

No description provided.

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive theme system supporting system-wide dark and light modes for the Taro-based WeChat mini-program. It upgrades the styling stack to Tailwind CSS v4 and weapp-tailwindcss v5, utilizing a custom theme.json and CSS variables for semantic color tokens across all pages. Additionally, it refactors numerous pages to support the new theme tokens, adds page-meta for seamless theme transitions, and introduces authentication checks on several discovery page navigation routes. The reviewer provided valuable feedback regarding theme synchronization and performance. Specifically, they recommended listening to Taro.onThemeChange in app.js to dynamically update native navigation and tab bars when the system theme changes. They also suggested removing the redundant initTheme() call from the useThemePage composable to prevent high-frequency synchronous system API calls and avoid console warnings on non-tab pages.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

微信小程序在系统深浅色切换时，并不一定会触发小程序重载（即重新执行 onLaunch）。在 iOS 和部分 Android 设备上，微信会动态切换主题并触发 wx.onThemeChange 回调。

如果仅在 onLaunch 中初始化主题，会导致系统主题切换后，页面内容（通过 CSS 媒体查询）自动变色，但导航栏和标签栏（通过 Taro.setNavigationBarColor 等 API 设置）仍保持旧主题，造成视觉不一致。

建议监听 Taro.onThemeChange 并动态更新主题，以确保导航栏和标签栏能实时响应系统主题的变化。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Taro from '@tarojs/taro'
import { useAuthStore } from './stores/auth'
import { useThemeStore } from './stores/theme'

import './app.css'

const pinia = createPinia()

const App = createApp({
  onLaunch() {
    const themeStore = useThemeStore()
    const authStore = useAuthStore()

    themeStore.initTheme()

    // 监听系统主题变化，动态更新导航栏和标签栏，避免主题切换时出现不一致
    Taro.onThemeChange((res) => {
      themeStore.systemTheme = res.theme
      themeStore.applyNativeTheme()
    })

    authStore.initAuth()
  },
})

[gemini-code-assist]

在 useThemePage 中，每次页面引入该 composable 都会调用 themeStore.initTheme()。这会导致以下性能和体验问题：

1. 高频同步系统调用：initTheme 内部会调用 Taro.getSystemInfoSync()，这是一个同步且开销较大的系统 API，在每个页面初始化时频繁调用会导致页面切换卡顿。
2. 冗余的 TabBar 设置：applyNativeTheme 会尝试为所有 TabBar 项设置图标。在非 TabBar 页面（如二级详情页）调用时，会导致微信控制台输出大量 setTabBarItem 失败的警告，并且产生不必要的性能开销。

由于已经在 app.js 的 onLaunch 中初始化了主题，且小程序原生支持通过 theme.json 自动切换导航栏和背景色，因此在页面级 Composables 中无需重复初始化。建议移除 useThemePage 中的 initTheme() 调用，仅返回 themeStore。

Suggested change

	// 主题跟随系统，系统切换会重载小程序，这里初始化一次即可。
	themeStore.initTheme()
	// 主题由 app.js 统一初始化和监听，此处仅返回 store 避免重复初始化带来的性能开销。