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

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 实现**
   ```dart
   // lib/providers/theme_provider.dart
   - 确保主题切换逻辑正确
   - 确保持久化工作正常
   ```

2. **检查主题配置**
   ```dart
   // lib/core/theme/app_theme.dart
   - 确保 lightTheme 和 darkTheme 都已定义
   - 确保 ShadTheme 配置正确
   ```

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

3. **替换所有硬编码颜色**

   **通用替换规则**:
   ```dart
   // ❌ 错误 - 硬编码
   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. **运行代码分析**
   ```bash
   flutter analyze
   ```
   - 确保 0 errors

7. **测试主题切换**
   ```bash
   flutter run -d chrome
   ```
   - 测试深色主题
   - 测试浅色主题
   - 测试主题切换动画
   - 验证所有页面响应主题变化

8. **视觉验证**
   - 检查对比度（WCAG AA 标准）
   - 检查颜色一致性
   - 检查主题切换流畅度

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

9. **构建生产版本**
   ```bash
   flutter build web --release --dart-define=ENV=prod
   ```

10. **提交代码**
    ```bash
    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

```dart
// ❌ 错误
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

```dart
// ❌ 错误
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
- ✅ 所有功能正常
- ✅ 所有中文文字保持不变

---

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