monisuo/PROMPT_THEME_FIX.md

修复主题切换 - 动态颜色系统

You are running a development task using the monisuo-dev skill workflow.

问题诊断

当前代码存在严重问题：

• ❌ 所有颜色都是硬编码的 AppColorScheme.dark*
• ❌ 主题切换功能不生效
• ❌ 只有深色主题，没有浅色主题

目标

修复主题切换功能，确保所有页面支持明暗主题动态切换。

参考文件

• Feature Spec: docs/features/theme-dynamic-colors.md (必读)
• ThemeProvider: lib/providers/theme_provider.dart (已存在)
• 颜色系统: lib/core/theme/app_color_scheme.dart

任务清单

Phase 1: 检查 ThemeProvider (15分钟)

1. 检查 ThemeProvider 实现

   // lib/providers/theme_provider.dart
   - 确保主题切换逻辑正确
   - 确保持久化工作正常
   

2. 检查主题配置

   // lib/core/theme/app_theme.dart
   - 确保 lightTheme 和 darkTheme 都已定义
   - 确保 ShadTheme 配置正确
   

Phase 2: 修复所有页面的颜色 (90分钟)

3. 替换所有硬编码颜色

   通用替换规则:

   // ❌ 错误 - 硬编码
   AppColorScheme.darkBackground
   AppColorScheme.darkOnSurface
   AppColorScheme.darkPrimary
   AppColorScheme.darkSecondary
   // ... 等等
   
   // ✅ 正确 - 动态
   Theme.of(context).colorScheme.background
   Theme.of(context).colorScheme.onSurface
   Theme.of(context).colorScheme.primary
   Theme.of(context).colorScheme.secondary
   

4. 需要修改的文件（按优先级）:

   P0 - 主要页面:

   • lib/ui/pages/home/home_page.dart
   • lib/ui/pages/market/market_page.dart
   • lib/ui/pages/trade/trade_page.dart
   • lib/ui/pages/asset/asset_page.dart
   • lib/ui/pages/mine/mine_page.dart

   P1 - 订单页面:

   • lib/ui/pages/orders/orders_page.dart
   • lib/ui/pages/orders/fund_order_card.dart
   • lib/ui/pages/orders/fund_orders_list.dart
   • lib/ui/pages/orders/fund_orders_page.dart

   P2 - 组件:

   • lib/ui/components/glass_panel.dart
   • lib/ui/components/neon_glow.dart
   • lib/ui/components/gradient_button.dart
   • lib/ui/components/asset_card.dart
   • lib/ui/components/coin_card.dart
   • lib/ui/components/trade_button.dart

5. 特殊处理:

   • GlassPanel: 需要根据主题调整透明度
   • NeonGlow: 需要根据主题调整光效强度
   • 渐变按钮: 需要根据主题调整渐变色

Phase 3: 测试验证 (15分钟)

6. 运行代码分析

   flutter analyze
   

   • 确保 0 errors

7. 测试主题切换

   flutter run -d chrome
   

   • 测试深色主题
   • 测试浅色主题
   • 测试主题切换动画
   • 验证所有页面响应主题变化

8. 视觉验证

   • 检查对比度（WCAG AA 标准）
   • 检查颜色一致性
   • 检查主题切换流畅度

Phase 4: 构建部署 (10分钟)

9. 构建生产版本

   flutter build web --release --dart-define=ENV=prod
   

10. 提交代码

    git add .
    git commit -m "fix(ui): 修复主题切换功能，支持明暗主题动态切换
    
    - 替换所有硬编码颜色为动态颜色
    - 所有页面使用 Theme.of(context)
    - 支持深色和浅色主题切换
    - 修复 GlassPanel 和 NeonGlow 组件的主题适配
    - 测试主题切换功能正常"
    
    git push
    

颜色映射表

硬编码颜色	动态颜色
AppColorScheme.darkBackground	Theme.of(context).colorScheme.background
AppColorScheme.darkOnSurface	Theme.of(context).colorScheme.onSurface
AppColorScheme.darkOnSurfaceVariant	Theme.of(context).colorScheme.onSurfaceVariant
AppColorScheme.darkPrimary	Theme.of(context).colorScheme.primary
AppColorScheme.darkSecondary	Theme.of(context).colorScheme.secondary
AppColorScheme.darkTertiary	Theme.of(context).colorScheme.tertiary
AppColorScheme.darkSurface	Theme.of(context).colorScheme.surface
AppColorScheme.darkSurfaceBright	Theme.of(context).colorScheme.surfaceBright
AppColorScheme.darkSurfaceContainer	Theme.of(context).colorScheme.surfaceContainer
AppColorScheme.darkSurfaceHigh	Theme.of(context).colorScheme.surfaceContainerHigh
AppColorScheme.darkOutline	Theme.of(context).colorScheme.outline
AppColorScheme.darkOutlineVariant	Theme.of(context).colorScheme.outlineVariant
AppColorScheme.neonGlowPrimary	Theme.of(context).colorScheme.primary.withOpacity(0.15)

特殊组件处理

GlassPanel

// ❌ 错误
color: AppColorScheme.darkSurfaceBright.withValues(alpha: 0.4)

// ✅ 正确
color: Theme.of(context).colorScheme.surfaceBright.withOpacity(
  Theme.of(context).brightness == Brightness.dark ? 0.4 : 0.6
)

NeonGlow

// ❌ 错误
BoxShadow(
  color: AppColorScheme.neonGlowPrimary,
  blurRadius: 15,
)

// ✅ 正确
BoxShadow(
  color: Theme.of(context).colorScheme.primary.withOpacity(
    Theme.of(context).brightness == Brightness.dark ? 0.15 : 0.08
  ),
  blurRadius: 15,
)

执行规则

1. 逐个文件修改 - 不要批量修改
2. 测试每个页面 - 修改完一个页面就测试
3. 保持功能不变 - 只修改颜色，不修改逻辑
4. 确保主题切换流畅 - 避免闪烁
5. 保持中文字符 - 不要修改任何中文文字

完成标准

• ✅ 所有页面使用动态颜色
• ✅ 主题切换功能正常
• ✅ 深色主题显示正常
• ✅ 浅色主题显示正常
• ✅ flutter analyze 0 errors
• ✅ 所有功能正常
• ✅ 所有中文文字保持不变

---

开始执行吧！让主题切换功能正常工作！ 🚀🎨