template-10550/docs/THEME_SYSTEM_GUIDE.md

🎨 主题切换系统使用指南

📖 功能概述

我们为你的小程序实现了一套完整的主题切换系统，用户可以选择不同的渐变主题来个性化界面。

🎯 功能特点

✨ 智能主题

• 自动选择：根据用户ID自动分配个性化主题
• 8种精美主题：海洋蓝紫、日落橙红、清新蓝绿、自然绿青、温暖橙黄、梦幻紫粉、经典蓝白、优雅灰黑
• 持久化存储：用户选择会自动保存

🎨 手动选择

• 实时预览：选择主题时立即看到效果
• 一键保存：保存后自动返回上级页面
• 全局应用：主题会应用到所有支持的页面

🚀 如何使用

1. 访问主题设置页面

用户可以通过以下方式进入主题设置：

// 在任何页面中跳转到主题设置
Taro.navigateTo({
  url: '/user/theme/index'
})

2. 在用户中心添加入口

你可以在用户中心页面添加"主题设置"入口：

<Cell
  title="主题设置"
  extra="个性化界面"
  onClick={() => Taro.navigateTo({ url: '/user/theme/index' })}
/>

3. 在组件中使用主题

使用 useThemeStyles Hook

import { useThemeStyles } from '@/hooks/useTheme'

const MyComponent = () => {
  const themeStyles = useThemeStyles()
  
  return (
    <View style={themeStyles.primaryBackground}>
      <Text style={{ color: themeStyles.textColor }}>
        这里会应用当前主题的样式
      </Text>
      <Button style={themeStyles.primaryButton}>
        主题按钮
      </Button>
    </View>
  )
}

使用 useTheme Hook

import { useTheme } from '@/hooks/useTheme'

const MyComponent = () => {
  const { currentTheme, setTheme, isAutoTheme } = useTheme()
  
  return (
    <View style={{ background: currentTheme.background }}>
      <Text style={{ color: currentTheme.textColor }}>
        当前主题：{currentTheme.description}
      </Text>
      {isAutoTheme && <Text>使用智能主题</Text>}
    </View>
  )
}

🎨 可用主题列表

主题名称	主色调	描述	适用场景
ocean	蓝紫色	海洋蓝紫 - 科技感与专业感	商务、科技类应用
sunset	橙红色	日落橙红 - 活力与热情	社交、娱乐类应用
fresh	蓝绿色	清新蓝绿 - 清新与活力	健康、运动类应用
nature	绿青色	自然绿青 - 生机与成长	环保、教育类应用
warm	橙黄色	温暖橙黄 - 温馨与舒适	生活、家居类应用
dream	紫粉色	梦幻紫粉 - 浪漫与梦幻	时尚、美妆类应用
classic	蓝白色	经典蓝白 - 简约与专业	办公、工具类应用
elegant	灰黑色	优雅灰黑 - 高端与品质	奢侈品、艺术类应用

🔧 开发者指南

添加新主题

在 src/styles/gradients.ts 中添加新主题：

export const gradientThemes: GradientTheme[] = [
  // 现有主题...
  {
    name: 'custom',
    primary: '#your-primary-color',
    secondary: '#your-secondary-color',
    background: 'linear-gradient(135deg, #color1 0%, #color2 100%)',
    textColor: '#ffffff',
    description: '自定义主题 - 你的描述'
  }
]

在新页面中应用主题

import { useThemeStyles } from '@/hooks/useTheme'

const NewPage = () => {
  const themeStyles = useThemeStyles()
  
  return (
    <View className="min-h-screen bg-gray-50">
      {/* 使用主题背景的头部 */}
      <View 
        className="px-4 py-6 relative overflow-hidden"
        style={themeStyles.primaryBackground}
      >
        <Text className="text-lg font-bold" style={{ color: themeStyles.textColor }}>
          页面标题
        </Text>
      </View>
      
      {/* 其他内容 */}
      <View className="p-4">
        <Button style={themeStyles.primaryButton}>
          主题按钮
        </Button>
      </View>
    </View>
  )
}

📱 用户体验

智能主题算法

系统会根据用户ID生成一个稳定的主题选择：

// 用户ID为 "12345" 的用户总是会得到相同的主题
const theme = gradientUtils.getThemeByUserId("12345")

主题持久化

• 用户选择会保存在本地存储中
• 重新打开应用时会自动应用上次选择的主题
• 支持"智能主题"和"手动选择"两种模式

🎉 效果展示

智能主题模式

• 每个用户都有独特的个性化主题
• 基于用户ID算法分配，确保稳定性
• 提升用户归属感和个性化体验

手动选择模式

• 用户可以自由选择喜欢的主题
• 实时预览效果
• 一键保存并应用

🔄 更新日志

v1.0.0 (2025-01-18)

• ✅ 实现8种精美渐变主题
• ✅ 智能主题自动分配算法
• ✅ 主题切换页面UI
• ✅ useTheme 和 useThemeStyles Hooks
• ✅ 主题持久化存储
• ✅ 小程序兼容性优化

---

现在你的用户可以享受个性化的主题体验了！ 🎨✨