feat(ui): 添加明暗主题切换支持

- 创建 ThemeProvider 管理主题状态 - 配置浅色和深色主题（Vercel/Linear 风格） - 集成 Google Fonts（Inter + JetBrains Mono） - 在我的页面添加主题切换开关 - 更新颜色系统符合 modernization-v2.md 规范 - 优化间距和圆角系统 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-23 14:12:00 +08:00
parent 6ccb29556e
commit c4cf23a4a1
11 changed files with 1052 additions and 208 deletions
--- a/flutter_monisuo/IMPLEMENTATION_PLAN.md
+++ b/flutter_monisuo/IMPLEMENTATION_PLAN.md
@@ -1,7 +1,52 @@
 # Monisuo 主题现代化实施计划

 ## Status
-STATUS: COMPLETE
+STATUS: IN_PROGRESS
+
+## Phase 7: 现代化改造 v2.0（当前任务）
+
+### 目标
+将 Flutter Monisuo 应用打造为现代化、简约、专业的虚拟货币交易平台。
+
+### 设计规范参考: `specs/modernization-v2.md`
+
+### 7.1 P0 - 核心基础设施 ✅
+- [x] 7.1.1 创建 ThemeProvider（明暗主题切换）
+- [x] 7.1.2 更新 main.dart 使用 MultiProvider
+- [x] 7.1.3 创建浅色主题配置
+- [x] 7.1.4 更新深色主题配置
+- [x] 7.1.5 在 mine_page 添加主题切换开关
+- [x] 7.1.6 更新颜色系统（app_colors.dart）
+- [x] 7.1.7 集成 Google Fonts（Inter + JetBrains Mono）
+
+### 7.2 P1 - 组件现代化
+- [x] 7.2.1 创建间距系统（app_spacing.dart）
+- [x] 7.2.2 创建圆角系统（app_border_radius.dart）
+- [ ] 7.2.3 优化按钮组件
+- [ ] 7.2.4 优化卡片组件
+- [ ] 7.2.5 优化输入框组件
+
+### 7.3 P2 - 弹窗现代化
+- [ ] 7.3.1 创建现代弹窗模板
+- [ ] 7.3.2 创建现代底部抽屉模板
+- [ ] 7.3.3 更新所有 AlertDialog
+
+### 7.4 P3 - 页面优化
+- [ ] 7.4.1 登录页面现代化
+- [ ] 7.4.2 首页现代化
+- [ ] 7.4.3 行情页现代化
+- [ ] 7.4.4 交易页现代化
+- [ ] 7.4.5 资产页现代化
+- [ ] 7.4.6 我的页面现代化
+
+### 7.5 P4 - 验证与优化
+- [ ] 7.5.1 对比度检查（WCAG AA >= 4.5:1）
+- [ ] 7.5.2 响应式布局测试
+- [ ] 7.5.3 动画优化
+
+---
+
+## Previous Phases (Completed)

 ## Progress

--- a/flutter_monisuo/lib/core/theme/app_color_scheme.dart
+++ b/flutter_monisuo/lib/core/theme/app_color_scheme.dart
@@ -1,61 +1,221 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
-import '../constants/app_colors.dart';

-/// 自定义品牌颜色方案 - 深色主题
+/// 现代化颜色系统 - 支持明暗主题
 ///
-/// 基于品牌色 #2563EB (专业蓝) 定制
-class AppShadColorScheme {
-  AppShadColorScheme._();
+/// 设计原则：
+/// - Vercel/Linear 风格的现代简约设计
+/// - 深色主题：#0A0A0B 背景，微妙阴影
+/// - 浅色主题：纯白背景，清晰边框
+/// - 所有对比度 >= 4.5:1 (WCAG AA)
+class AppColorScheme {
+  AppColorScheme._();

-  /// 深色主题颜色
-  static ShadColorScheme get dark => ShadColorScheme(
+  // ============================================
+  // 品牌色 - 青绿色 (明暗通用)
+  // ============================================
+
+  /// 主品牌色 - 深色主题
+  static const Color primaryDark = Color(0xFF00D4AA);
+
+  /// 主品牌色 - 浅色主题
+  static const Color primaryLight = Color(0xFF00B894);
+
+  // ============================================
+  // 语义色 - 涨跌 (明暗通用)
+  // ============================================
+
+  /// 涨/买入 - 绿色
+  static const Color up = Color(0xFF00C853);
+
+  /// 跌/卖出 - 红色
+  static const Color down = Color(0xFFFF5252);
+
+  /// 成功
+  static const Color success = Color(0xFF00C853);
+
+  /// 警告
+  static const Color warning = Color(0xFFFF9800);
+
+  /// 错误
+  static const Color error = Color(0xFFFF5252);
+
+  /// 信息
+  static const Color info = Color(0xFF2196F3);
+
+  // ============================================
+  // 深色主题颜色 (Vercel/Linear 风格)
+  // ============================================
+
+  static const Color _darkBackground = Color(0xFF0A0A0B);
+  static const Color _darkCardBackground = Color(0xFF111113);
+  static const Color _darkSecondary = Color(0xFF1C1C1F);
+  static const Color _darkMuted = Color(0xFF27272A);
+  static const Color _darkBorder = Color(0xFF27272A);
+  static const Color _darkTextPrimary = Color(0xFFFFFFFF);
+  static const Color _darkTextSecondary = Color(0xFFA1A1AA);
+  static const Color _darkTextHint = Color(0xFF71717A);
+
+  // ============================================
+  // 浅色主题颜色
+  // ============================================
+
+  static const Color _lightBackground = Color(0xFFFFFFFF);
+  static const Color _lightCardBackground = Color(0xFFFAFAFA);
+  static const Color _lightSecondary = Color(0xFFF4F4F5);
+  static const Color _lightMuted = Color(0xFFE4E4E7);
+  static const Color _lightBorder = Color(0xFFE4E4E7);
+  static const Color _lightTextPrimary = Color(0xFF0A0A0B);
+  static const Color _lightTextSecondary = Color(0xFF52525B);
+  static const Color _lightTextHint = Color(0xFF71717A);
+
+  // ============================================
+  // Shadcn ColorScheme - 深色主题
+  // ============================================
+
+  static ShadColorScheme get darkShad => ShadColorScheme(
    // 背景与前景
-    background: AppColors.background,
-    foreground: AppColors.textPrimary,
+    background: _darkBackground,
+    foreground: _darkTextPrimary,

    // 卡片
-    card: AppColors.cardBackground,
-    cardForeground: AppColors.textPrimary,
+    card: _darkCardBackground,
+    cardForeground: _darkTextPrimary,

    // 弹出层
-    popover: AppColors.surface,
-    popoverForeground: AppColors.textPrimary,
+    popover: _darkCardBackground,
+    popoverForeground: _darkTextPrimary,

    // 主色
-    primary: AppColors.primary,
-    primaryForeground: Colors.white,
+    primary: primaryDark,
+    primaryForeground: _darkTextPrimary,

    // 次要色
-    secondary: const Color(0xFF252542),
-    secondaryForeground: AppColors.textPrimary,
+    secondary: _darkSecondary,
+    secondaryForeground: _darkTextPrimary,

    // 静音色
-    muted: const Color(0xFF2A2A45),
-    mutedForeground: AppColors.textSecondary,
+    muted: _darkMuted,
+    mutedForeground: _darkTextSecondary,

    // 强调色
-    accent: AppColors.primary.withValues(alpha: 0.15),
-    accentForeground: AppColors.primary,
+    accent: primaryDark.withValues(alpha: 0.15),
+    accentForeground: primaryDark,

    // 危险色
-    destructive: AppColors.error,
-    destructiveForeground: Colors.white,
+    destructive: error,
+    destructiveForeground: _darkTextPrimary,

    // 边框与输入
-    border: AppColors.border,
-    input: AppColors.inputBorder,
-    ring: AppColors.primary,
+    border: _darkBorder,
+    input: _darkBorder,
+    ring: primaryDark,

    // 选择色
-    selection: AppColors.primary.withValues(alpha: 0.3),
+    selection: primaryDark.withValues(alpha: 0.3),
+  );
+
+  // ============================================
+  // Shadcn ColorScheme - 浅色主题
+  // ============================================
+
+  static ShadColorScheme get lightShad => ShadColorScheme(
+    // 背景与前景
+    background: _lightBackground,
+    foreground: _lightTextPrimary,
+
+    // 卡片
+    card: _lightCardBackground,
+    cardForeground: _lightTextPrimary,
+
+    // 弹出层
+    popover: _lightBackground,
+    popoverForeground: _lightTextPrimary,
+
+    // 主色
+    primary: primaryLight,
+    primaryForeground: _lightBackground,
+
+    // 次要色
+    secondary: _lightSecondary,
+    secondaryForeground: _lightTextPrimary,
+
+    // 静音色
+    muted: _lightMuted,
+    mutedForeground: _lightTextSecondary,
+
+    // 强调色
+    accent: primaryLight.withValues(alpha: 0.15),
+    accentForeground: primaryLight,
+
+    // 危险色
+    destructive: error,
+    destructiveForeground: _lightBackground,
+
+    // 边框与输入
+    border: _lightBorder,
+    input: _lightBorder,
+    ring: primaryLight,
+
+    // 选择色
+    selection: primaryLight.withValues(alpha: 0.3),
+  );
+
+  // ============================================
+  // Material ColorScheme - 深色主题
+  // ============================================
+
+  static ColorScheme get darkMaterial => ColorScheme.dark(
+    primary: primaryDark,
+    onPrimary: _darkTextPrimary,
+    secondary: _darkSecondary,
+    onSecondary: _darkTextPrimary,
+    error: error,
+    onError: _darkTextPrimary,
+    surface: _darkCardBackground,
+    onSurface: _darkTextPrimary,
+    surfaceContainerHighest: _darkBackground,
+  );
+
+  // ============================================
+  // Material ColorScheme - 浅色主题
+  // ============================================
+
+  static ColorScheme get lightMaterial => ColorScheme.light(
+    primary: primaryLight,
+    onPrimary: _lightBackground,
+    secondary: _lightSecondary,
+    onSecondary: _lightTextPrimary,
+    error: error,
+    onError: _lightBackground,
+    surface: _lightCardBackground,
+    onSurface: _lightTextPrimary,
+    surfaceContainerHighest: _lightBackground,
  );
 }

-/// 创建自定义 ShadThemeData
-ShadThemeData createAppShadTheme() {
+/// 创建 Shadcn 深色主题
+ShadThemeData createDarkShadTheme() {
  return ShadThemeData(
    brightness: Brightness.dark,
-    colorScheme: AppShadColorScheme.dark,
+    colorScheme: AppColorScheme.darkShad,
  );
 }
+
+/// 创建 Shadcn 浅色主题
+ShadThemeData createLightShadTheme() {
+  return ShadThemeData(
+    brightness: Brightness.light,
+    colorScheme: AppColorScheme.lightShad,
+  );
+}
+
+/// 获取涨跌颜色（明暗通用）
+Color getChangeColor(bool isUp) => isUp ? AppColorScheme.up : AppColorScheme.down;
+
+/// 获取涨跌背景色（带透明度）
+Color getChangeBackgroundColor(bool isUp, {double opacity = 0.15}) {
+  return isUp
+    ? AppColorScheme.up.withValues(alpha: opacity)
+    : AppColorScheme.down.withValues(alpha: opacity);
+}
--- a/flutter_monisuo/lib/core/theme/app_colors.dart
+++ b/flutter_monisuo/lib/core/theme/app_colors.dart
@@ -138,7 +138,7 @@ class AppColors {

  /// 获取带透明度的涨跌背景色
  static Color getChangeBackgroundColor(bool isUp) =>
-      isUp ? up.withOpacity(0.15) : down.withOpacity(0.15);
+      isUp ? up.withValues(alpha: 0.15) : down.withValues(alpha: 0.15);

  /// 渐变色 (兼容旧代码) - 品牌蓝
  static const List<Color> gradientColors = [Color(0xFF2563EB), Color(0xFF1D4ED8)];
--- a/flutter_monisuo/lib/core/theme/app_spacing.dart
+++ b/flutter_monisuo/lib/core/theme/app_spacing.dart
@@ -67,7 +67,7 @@ class AppSpacing {
  static SizedBox vertical(double spacing) => SizedBox(height: spacing);
 }

-/// 圆角系统
+/// 圆角系统 - 基于 modernization-v2.md 规范
 class AppRadius {
  AppRadius._();

@@ -75,20 +75,23 @@ class AppRadius {
  // 基础圆角 (Base Radius)
  // ============================================

-  /// 小圆角 - 6px (标签、小组件)
-  static const double sm = 6.0;
+  /// 小圆角 - 4px (标签、小组件)
+  static const double sm = 4.0;

-  /// 中圆角 - 10px (按钮、输入框)
-  static const double md = 10.0;
+  /// 中圆角 - 8px (按钮、输入框)
+  static const double md = 8.0;

-  /// 大圆角 - 14px (卡片)
-  static const double lg = 14.0;
+  /// 大圆角 - 12px (卡片)
+  static const double lg = 12.0;

-  /// 特大圆角 - 20px (大卡片、模态框)
-  static const double xl = 20.0;
+  /// 特大圆角 - 16px (大卡片)
+  static const double xl = 16.0;

-  /// 圆形 - 999px
-  static const double full = 999.0;
+  /// 超大圆角 - 24px (模态框、底部抽屉)
+  static const double xxl = 24.0;
+
+  /// 圆形 - 9999px
+  static const double full = 9999.0;

  // ============================================
  // 预设 BorderRadius
@@ -106,6 +109,9 @@ class AppRadius {
  /// 特大圆角
  static BorderRadius get radiusXl => BorderRadius.circular(xl);

+  /// 超大圆角
+  static BorderRadius get radiusXxl => BorderRadius.circular(xxl);
+
  /// 圆形
  static BorderRadius get radiusFull => BorderRadius.circular(full);
 }
--- a/flutter_monisuo/lib/core/theme/app_theme.dart
+++ b/flutter_monisuo/lib/core/theme/app_theme.dart
@@ -1,62 +1,65 @@
 import 'package:flutter/material.dart';
-import '../constants/app_colors.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'app_color_scheme.dart';
+import 'app_spacing.dart';

-/// 应用主题配置
+/// 应用主题配置 - 基于 modernization-v2.md 规范
 class AppTheme {
  AppTheme._();

-  /// 深色主题
+  // ============================================
+  // 深色主题
+  // ============================================
+
  static ThemeData get darkTheme {
    return ThemeData(
      useMaterial3: true,
      brightness: Brightness.dark,
-      scaffoldBackgroundColor: AppColors.background,
-      primaryColor: AppColors.primary,
-      colorScheme: const ColorScheme.dark(
-        primary: AppColors.primary,
-        secondary: AppColors.primaryLight,
-        error: AppColors.error,
-        surface: AppColors.cardBackground,
-      ),
-      appBarTheme: const AppBarTheme(
-        backgroundColor: AppColors.background,
-        foregroundColor: AppColors.textPrimary,
+      scaffoldBackgroundColor: AppColorScheme.darkShad.background,
+      primaryColor: AppColorScheme.primaryDark,
+      colorScheme: AppColorScheme.darkMaterial,
+      appBarTheme: AppBarTheme(
+        backgroundColor: AppColorScheme.darkShad.background,
+        foregroundColor: AppColorScheme.darkShad.foreground,
        elevation: 0,
        centerTitle: true,
-        titleTextStyle: TextStyle(
+        titleTextStyle: GoogleFonts.inter(
          fontSize: 18,
          fontWeight: FontWeight.w600,
-          color: AppColors.textPrimary,
+          color: AppColorScheme.darkShad.foreground,
        ),
      ),
      inputDecorationTheme: InputDecorationTheme(
        filled: true,
-        fillColor: AppColors.cardBackground,
+        fillColor: AppColorScheme.darkShad.card,
        border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(12),
-          borderSide: const BorderSide(color: AppColors.border),
+          borderRadius: BorderRadius.circular(AppRadius.md),
+          borderSide: BorderSide(color: AppColorScheme.darkShad.border),
        ),
        enabledBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(12),
-          borderSide: const BorderSide(color: AppColors.border),
+          borderRadius: BorderRadius.circular(AppRadius.md),
+          borderSide: BorderSide(color: AppColorScheme.darkShad.border),
        ),
        focusedBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(12),
-          borderSide: const BorderSide(color: AppColors.primary),
+          borderRadius: BorderRadius.circular(AppRadius.md),
+          borderSide: BorderSide(color: AppColorScheme.primaryDark, width: 2),
+        ),
+        hintStyle: TextStyle(color: AppColorScheme.darkShad.mutedForeground),
+        contentPadding: const EdgeInsets.symmetric(
+          horizontal: AppSpacing.md,
+          vertical: 14,
        ),
-        hintStyle: const TextStyle(color: AppColors.textHint),
-        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      ),
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
-          backgroundColor: AppColors.primary,
+          backgroundColor: AppColorScheme.primaryDark,
          foregroundColor: Colors.white,
          minimumSize: const Size(double.infinity, 48),
          padding: const EdgeInsets.symmetric(vertical: 14),
          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(12),
+            borderRadius: BorderRadius.circular(AppRadius.md),
          ),
-          textStyle: const TextStyle(
+          textStyle: GoogleFonts.inter(
            fontSize: 16,
            fontWeight: FontWeight.w600,
          ),
@@ -64,200 +67,243 @@ class AppTheme {
      ),
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
-          foregroundColor: AppColors.primary,
+          foregroundColor: AppColorScheme.primaryDark,
        ),
      ),
-      dividerTheme: const DividerThemeData(
-        color: AppColors.border,
+      dividerTheme: DividerThemeData(
+        color: AppColorScheme.darkShad.border,
        thickness: 1,
      ),
      cardTheme: CardThemeData(
-        color: AppColors.cardBackground,
+        color: AppColorScheme.darkShad.card,
        elevation: 0,
        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(16),
+          borderRadius: BorderRadius.circular(AppRadius.lg),
+        ),
+      ),
+    );
+  }
+
+  // ============================================
+  // 浅色主题
+  // ============================================
+
+  static ThemeData get lightTheme {
+    return ThemeData(
+      useMaterial3: true,
+      brightness: Brightness.light,
+      scaffoldBackgroundColor: AppColorScheme.lightShad.background,
+      primaryColor: AppColorScheme.primaryLight,
+      colorScheme: AppColorScheme.lightMaterial,
+      appBarTheme: AppBarTheme(
+        backgroundColor: AppColorScheme.lightShad.background,
+        foregroundColor: AppColorScheme.lightShad.foreground,
+        elevation: 0,
+        centerTitle: true,
+        titleTextStyle: GoogleFonts.inter(
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+          color: AppColorScheme.lightShad.foreground,
+        ),
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: AppColorScheme.lightShad.card,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(AppRadius.md),
+          borderSide: BorderSide(color: AppColorScheme.lightShad.border),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(AppRadius.md),
+          borderSide: BorderSide(color: AppColorScheme.lightShad.border),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(AppRadius.md),
+          borderSide: BorderSide(color: AppColorScheme.primaryLight, width: 2),
+        ),
+        hintStyle: TextStyle(color: AppColorScheme.lightShad.mutedForeground),
+        contentPadding: const EdgeInsets.symmetric(
+          horizontal: AppSpacing.md,
+          vertical: 14,
+        ),
+      ),
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ElevatedButton.styleFrom(
+          backgroundColor: AppColorScheme.primaryLight,
+          foregroundColor: Colors.white,
+          minimumSize: const Size(double.infinity, 48),
+          padding: const EdgeInsets.symmetric(vertical: 14),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(AppRadius.md),
+          ),
+          textStyle: GoogleFonts.inter(
+            fontSize: 16,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+      ),
+      textButtonTheme: TextButtonThemeData(
+        style: TextButton.styleFrom(
+          foregroundColor: AppColorScheme.primaryLight,
+        ),
+      ),
+      dividerTheme: DividerThemeData(
+        color: AppColorScheme.lightShad.border,
+        thickness: 1,
+      ),
+      cardTheme: CardThemeData(
+        color: AppColorScheme.lightShad.card,
+        elevation: 0,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(AppRadius.lg),
        ),
      ),
    );
  }
 }

-/// 文本样式
+/// 文本样式 - 使用 Google Fonts
 class AppTextStyles {
  AppTextStyles._();

+  // ============================================
+  // 标题样式 - Inter 字体
+  // ============================================
+
+  static TextStyle displayLarge(BuildContext context) => GoogleFonts.inter(
+    fontSize: 32,
+    fontWeight: FontWeight.w700,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  static TextStyle displayMedium(BuildContext context) => GoogleFonts.inter(
+    fontSize: 24,
+    fontWeight: FontWeight.w600,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  static TextStyle displaySmall(BuildContext context) => GoogleFonts.inter(
+    fontSize: 20,
+    fontWeight: FontWeight.w600,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  // ============================================
+  // 正文样式 - Inter 字体
+  // ============================================
+
+  static TextStyle bodyLarge(BuildContext context) => GoogleFonts.inter(
+    fontSize: 16,
+    fontWeight: FontWeight.w400,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  static TextStyle bodyMedium(BuildContext context) => GoogleFonts.inter(
+    fontSize: 14,
+    fontWeight: FontWeight.w400,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  static TextStyle bodySmall(BuildContext context) => GoogleFonts.inter(
+    fontSize: 12,
+    fontWeight: FontWeight.w400,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  // ============================================
+  // 数字样式 - JetBrains Mono 等宽字体
+  // ============================================
+
+  static TextStyle numberLarge(BuildContext context) => GoogleFonts.jetBrainsMono(
+    fontSize: 20,
+    fontWeight: FontWeight.w600,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  static TextStyle numberMedium(BuildContext context) => GoogleFonts.jetBrainsMono(
+    fontSize: 16,
+    fontWeight: FontWeight.w500,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  static TextStyle numberSmall(BuildContext context) => GoogleFonts.jetBrainsMono(
+    fontSize: 14,
+    fontWeight: FontWeight.w500,
+    color: Theme.of(context).colorScheme.onSurface,
+  );
+
+  // ============================================
+  // 便捷静态样式（兼容旧代码）
+  // ============================================
+
  static const TextStyle heading1 = TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );

  static const TextStyle heading2 = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );

  static const TextStyle heading3 = TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w600,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );

  static const TextStyle heading4 = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );

  static const TextStyle body1 = TextStyle(
    fontSize: 16,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );

  static const TextStyle body2 = TextStyle(
    fontSize: 14,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );

  static const TextStyle caption = TextStyle(
    fontSize: 12,
-    color: AppColors.textSecondary,
+    color: Color(0xFFA1A1AA),
  );

  static const TextStyle hint = TextStyle(
    fontSize: 14,
-    color: AppColors.textHint,
+    color: Color(0xFF71717A),
  );

-  /// 价格样式 - 用于显示价格、金额
  static const TextStyle price = TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );

-  /// 涨跌幅样式
  static const TextStyle change = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w600,
  );

-  /// 数字样式 - 用于显示数量
  static const TextStyle number = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w500,
-    color: AppColors.textPrimary,
+    color: Color(0xFFFFFFFF),
  );
 }

-/// 间距常量
-class AppSpacing {
-  AppSpacing._();
+/// 动画时长
+class AnimationDurations {
+  AnimationDurations._();

-  static const double xs = 4.0;
-  static const double sm = 8.0;
-  static const double md = 16.0;
-  static const double lg = 24.0;
-  static const double xl = 32.0;
-  static const double xxl = 48.0;
-
-  /// 页面水平内边距
-  static const double pageHorizontal = 16.0;
-
-  /// 页面垂直内边距
-  static const double pageVertical = 16.0;
-
-  /// 卡片内边距
-  static const double cardPadding = 16.0;
-
-  /// 列表项间距
-  static const double listItemSpacing = 8.0;
-
-  /// 表单字段间距
-  static const double formFieldSpacing = 12.0;
-}
-
-/// 圆角常量
-class AppRadius {
-  AppRadius._();
-
-  static const double sm = 8.0;
-  static const double md = 12.0;
-  static const double lg = 16.0;
-  static const double xl = 24.0;
-  static const double full = 999.0;
-
-  /// 卡片圆角
-  static const double card = lg;
-
-  /// 按钮圆角
-  static const double button = md;
-
-  /// 输入框圆角
-  static const double input = md;
-
-  /// 标签圆角
-  static const double badge = sm;
-}
-
-/// 响应式断点
-class AppBreakpoints {
-  AppBreakpoints._();
-
-  /// 手机
-  static const double mobile = 600;
-
-  /// 平板
-  static const double tablet = 900;
-
-  /// 桌面
-  static const double desktop = 1200;
-
-  /// 判断是否为手机
-  static bool isMobile(BuildContext context) =>
-      MediaQuery.of(context).size.width < mobile;
-
-  /// 判断是否为平板
-  static bool isTablet(BuildContext context) {
-    final width = MediaQuery.of(context).size.width;
-    return width >= mobile && width < tablet;
-  }
-
-  /// 判断是否为桌面
-  static bool isDesktop(BuildContext context) =>
-      MediaQuery.of(context).size.width >= tablet;
-}
-
-/// 响应式工具
-class Responsive {
-  Responsive._();
-
-  /// 根据屏幕宽度返回响应式值
-  static T value<T>(
-    BuildContext context, {
-    required T mobile,
-    T? tablet,
-    T? desktop,
-  }) {
-    final width = MediaQuery.of(context).size.width;
-
-    if (width >= AppBreakpoints.tablet && desktop != null) {
-      return desktop;
-    }
-    if (width >= AppBreakpoints.mobile && tablet != null) {
-      return tablet;
-    }
-    return mobile;
-  }
-
-  /// 响应式字体大小
-  static double fontSize(BuildContext context, double base) {
-    return value(context, mobile: base, tablet: base * 1.1, desktop: base * 1.2);
-  }
-
-  /// 响应式间距
-  static double spacing(BuildContext context, double base) {
-    return value(context, mobile: base, tablet: base * 1.2, desktop: base * 1.5);
-  }
+  static const Duration fast = Duration(milliseconds: 150);
+  static const Duration normal = Duration(milliseconds: 250);
+  static const Duration slow = Duration(milliseconds: 400);
+  static const Duration verySlow = Duration(milliseconds: 600);
 }
--- a/flutter_monisuo/lib/main.dart
+++ b/flutter_monisuo/lib/main.dart
@@ -16,6 +16,7 @@ import 'data/services/fund_service.dart';
 import 'providers/auth_provider.dart';
 import 'providers/market_provider.dart';
 import 'providers/asset_provider.dart';
+import 'providers/theme_provider.dart';
 import 'ui/pages/auth/login_page.dart';
 import 'ui/pages/main/main_page.dart';

@@ -36,12 +37,17 @@ class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: _buildProviders(),
-      child: AuthNavigator(
-        child: ShadApp.custom(
-          themeMode: ThemeMode.dark,
-          darkTheme: createAppShadTheme(),
-          appBuilder: _buildMaterialApp,
-        ),
+      child: Consumer<ThemeProvider>(
+        builder: (context, themeProvider, _) {
+          return AuthNavigator(
+            child: ShadApp.custom(
+              themeMode: themeProvider.themeMode,
+              theme: createLightShadTheme(),
+              darkTheme: createDarkShadTheme(),
+              appBuilder: _buildMaterialApp,
+            ),
+          );
+        },
      ),
    );
  }
@@ -50,6 +56,10 @@ class MyApp extends StatelessWidget {
    final dioClient = DioClient();

    return [
+      // Theme Provider (必须放在最前面)
+      ChangeNotifierProvider<ThemeProvider>(
+        create: (_) => ThemeProvider()..init(),
+      ),
      // Services
      Provider<DioClient>.value(value: dioClient),
      Provider<UserService>(create: (_) => UserService(dioClient)),
--- a/flutter_monisuo/lib/providers/theme_provider.dart
+++ b/flutter_monisuo/lib/providers/theme_provider.dart
@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+/// 主题提供者 - 管理明暗主题切换
+///
+/// 功能：
+/// - 支持浅色/深色/跟随系统三种模式
+/// - 持久化主题设置到本地存储
+/// - 提供主题切换方法
+class ThemeProvider extends ChangeNotifier {
+  static const String _themeModeKey = 'theme_mode';
+
+  ThemeMode _themeMode = ThemeMode.dark;
+
+  /// 当前主题模式
+  ThemeMode get themeMode => _themeMode;
+
+  /// 是否为深色模式
+  bool get isDarkMode => _themeMode == ThemeMode.dark;
+
+  /// 初始化主题设置（从本地存储加载）
+  Future<void> init() async {
+    final prefs = await SharedPreferences.getInstance();
+    final modeString = prefs.getString(_themeModeKey);
+
+    if (modeString != null) {
+      _themeMode = ThemeMode.values.firstWhere(
+        (mode) => mode.toString() == modeString,
+        orElse: () => ThemeMode.dark,
+      );
+      notifyListeners();
+    }
+  }
+
+  /// 切换主题（浅色/深色）
+  Future<void> toggleTheme() async {
+    _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
+    await _saveThemeMode();
+    notifyListeners();
+  }
+
+  /// 设置主题模式
+  Future<void> setThemeMode(ThemeMode mode) async {
+    if (_themeMode == mode) return;
+    _themeMode = mode;
+    await _saveThemeMode();
+    notifyListeners();
+  }
+
+  /// 保存主题设置到本地存储
+  Future<void> _saveThemeMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_themeModeKey, _themeMode.toString());
+  }
+}
--- a/flutter_monisuo/lib/ui/pages/mine/mine_page.dart
+++ b/flutter_monisuo/lib/ui/pages/mine/mine_page.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 import 'package:provider/provider.dart';
 import '../../../providers/auth_provider.dart';
+import '../../../providers/theme_provider.dart';
 import '../auth/login_page.dart';

 /// 菜单项数据模型
@@ -241,15 +242,19 @@ class _MenuList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
-    final items = _buildMenuItems();
+    final themeProvider = context.watch<ThemeProvider>();

    return ShadCard(
      padding: EdgeInsets.zero,
      child: Column(
        children: [
-          for (var i = 0; i < items.length; i++) ...[
-            _MenuItemTile(item: items[i]),
-            if (i < items.length - 1)
+          // 主题切换开关（特殊处理）
+          _ThemeToggleTile(isDarkMode: themeProvider.isDarkMode),
+          Divider(color: theme.colorScheme.border, height: 1, indent: 56),
+          // 普通菜单项
+          for (var i = 0; i < _buildMenuItems().length; i++) ...[
+            _MenuItemTile(item: _buildMenuItems()[i]),
+            if (i < _buildMenuItems().length - 1)
              Divider(color: theme.colorScheme.border, height: 1, indent: 56),
          ],
        ],
@@ -268,6 +273,51 @@ class _MenuList extends StatelessWidget {
  }
 }

+/// 主题切换组件
+class _ThemeToggleTile extends StatelessWidget {
+  final bool isDarkMode;
+
+  const _ThemeToggleTile({required this.isDarkMode});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    final themeProvider = context.read<ThemeProvider>();
+
+    return InkWell(
+      onTap: () => themeProvider.toggleTheme(),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+        child: Row(
+          children: [
+            _MenuIcon(icon: isDarkMode ? LucideIcons.moon : LucideIcons.sun),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text('深色模式', style: theme.textTheme.small.copyWith(fontWeight: FontWeight.w500)),
+                  const SizedBox(height: 2),
+                  Text(
+                    isDarkMode ? '当前：深色主题' : '当前：浅色主题',
+                    style: theme.textTheme.muted.copyWith(fontSize: 11),
+                  ),
+                ],
+              ),
+            ),
+            Switch(
+              value: isDarkMode,
+              onChanged: (_) => themeProvider.toggleTheme(),
+              activeTrackColor: theme.colorScheme.primary.withValues(alpha: 0.5),
+              activeColor: theme.colorScheme.primary,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 /// 菜单项组件
 class _MenuItemTile extends StatelessWidget {
  final _MenuItem item;
--- a/flutter_monisuo/pubspec.lock
+++ b/flutter_monisuo/pubspec.lock
@@ -197,6 +197,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "2.1.3"
+  google_fonts:
+    dependency: "direct main"
+    description:
+      name: google_fonts
+      sha256: ba03d03bcaa2f6cb7bd920e3b5027181db75ab524f8891c8bc3aa603885b8055
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.3.3"
  hooks:
    dependency: transitive
    description:
--- a/flutter_monisuo/pubspec.yaml
+++ b/flutter_monisuo/pubspec.yaml
@@ -30,6 +30,9 @@ dependencies:
  intl: ^0.20.2
  decimal: ^2.3.3

+  # 字体
+  google_fonts: ^6.2.1
+
 dev_dependencies:
  flutter_test:
    sdk: flutter
--- a/flutter_monisuo/specs/modernization-v2.md
+++ b/flutter_monisuo/specs/modernization-v2.md
@@ -0,0 +1,461 @@
+# Flutter Monisuo 现代化改造规范 v2.0
+
+## 目标
+将 Flutter Monisuo 应用打造为现代化、简约、专业的虚拟货币交易平台，参考 SuperDesign 设计原则。
+
+## 设计原则
+
+### 1. 现代化简约风格
+- **Vercel/Linear 风格**：干净的深色主题，微妙的阴影，大量留白
+- **避免过时设计**：不使用 Bootstrap 蓝、沉重的阴影、复杂的渐变
+- **微交互**：细腻的动画反馈（150-400ms）
+
+### 2. 明暗主题支持
+- 完整的 Light/Dark 主题切换
+- 使用 ColorScheme 管理主题
+- 主题切换时平滑过渡
+
+### 3. 颜色系统（基于 OKLCH 转换）
+
+#### 现代深色主题
+```dart
+// Vercel/Linear 风格
+background:       Color(0xFF0A0A0B)  // oklch(0.098 0.005 270)
+cardBackground:   Color(0xFF111113)  // oklch(0.148 0.004 270)
+primary:          Color(0xFF00D4AA)  // 品牌青绿色
+primaryForeground: Color(0xFFFFFFFF)
+secondary:        Color(0xFF1C1C1F)
+muted:            Color(0xFF27272A)
+border:           Color(0xFF27272A)
+```
+
+#### 现代浅色主题
+```dart
+background:       Color(0xFFFFFFFF)  // oklch(1 0 0)
+cardBackground:   Color(0xFFFAFAFA)  // oklch(0.98 0 0)
+primary:          Color(0xFF00B894)  // 品牌青绿色（深色版）
+primaryForeground: Color(0xFFFFFFFF)
+secondary:        Color(0xFFF4F4F5)
+muted:            Color(0xFFE4E4E7)
+border:           Color(0xFFE4E4E7)
+```
+
+#### 涨跌色（明暗通用）
+```dart
+up:    Color(0xFF00C853)  // 涨/买入（绿色）
+down:  Color(0xFFFF5252)  // 跌/卖出（红色）
+```
+
+### 4. 字体系统
+
+#### 使用 Google Fonts
+```yaml
+dependencies:
+  google_fonts: ^6.1.0
+```
+
+#### 字体选择
+- **主字体**：Inter（现代、清晰）
+- **数字字体**：JetBrains Mono（等宽，用于价格/数量）
+- **回退字体**：system-ui
+
+#### 字号系统
+```dart
+// 标题
+displayLarge:   32sp, weight: 700
+displayMedium:  24sp, weight: 600
+displaySmall:   20sp, weight: 600
+
+// 正文
+bodyLarge:      16sp, weight: 400
+bodyMedium:     14sp, weight: 400
+bodySmall:      12sp, weight: 400
+
+// 数字（等宽）
+numberLarge:    20sp, JetBrains Mono
+numberMedium:   16sp, JetBrains Mono
+numberSmall:    14sp, JetBrains Mono
+```
+
+### 5. 间距系统
+
+```dart
+class Spacing {
+  static const double xs   = 4.0;   // 0.25rem
+  static const double sm   = 8.0;   // 0.5rem
+  static const double md   = 16.0;  // 1rem
+  static const double lg   = 24.0;  // 1.5rem
+  static const double xl   = 32.0;  // 2rem
+  static const double xxl  = 48.0;  // 3rem
+}
+```
+
+### 6. 圆角系统
+
+```dart
+class BorderRadius {
+  static const double sm   = 4.0;
+  static const double md   = 8.0;
+  static const double lg   = 12.0;
+  static const double xl   = 16.0;
+  static const double xxl  = 24.0;
+  static const double full = 9999.0;
+}
+```
+
+### 7. 阴影系统
+
+```dart
+// 微妙的阴影（Vercel 风格）
+BoxShadow(
+  color: Colors.black.withOpacity(0.05),
+  blurRadius: 4,
+  offset: Offset(0, 2),
+)
+
+// 悬停阴影
+BoxShadow(
+  color: Colors.black.withOpacity(0.1),
+  blurRadius: 8,
+  offset: Offset(0, 4),
+)
+```
+
+### 8. 动画系统
+
+```dart
+class AnimationDurations {
+  static const Duration fast      = Duration(milliseconds: 150);
+  static const Duration normal    = Duration(milliseconds: 250);
+  static const Duration slow      = Duration(milliseconds: 400);
+  static const Duration verySlow  = Duration(milliseconds: 600);
+}
+
+// Curves
+Curves.easeOutCubic      // 入场动画
+Curves.easeInOutCubic    // 过渡动画
+Curves.elasticOut        // 弹性反馈
+```
+
+## 组件设计规范
+
+### 1. 按钮
+
+#### 主要按钮（Primary）
+```dart
+ElevatedButton(
+  style: ElevatedButton.styleFrom(
+    backgroundColor: Theme.of(context).colorScheme.primary,
+    foregroundColor: Theme.of(context).colorScheme.onPrimary,
+    minimumSize: Size(44, 44),  // 触摸目标
+    padding: EdgeInsets.symmetric(horizontal: Spacing.lg, vertical: Spacing.md),
+    shape: RoundedRectangleBorder(
+      borderRadius: BorderRadius.circular(BorderRadius.md),
+    ),
+    elevation: 0,  // 现代风格：无阴影或微阴影
+  ),
+)
+```
+
+#### 次要按钮（Secondary）
+```dart
+OutlinedButton(
+  style: OutlinedButton.styleFrom(
+    minimumSize: Size(44, 44),
+    shape: RoundedRectangleBorder(
+      borderRadius: BorderRadius.circular(BorderRadius.md),
+    ),
+    side: BorderSide(color: Theme.of(context).colorScheme.border),
+  ),
+)
+```
+
+#### 幽灵按钮（Ghost）
+```dart
+TextButton(
+  style: TextButton.styleFrom(
+    minimumSize: Size(44, 44),
+  ),
+)
+```
+
+### 2. 卡片
+
+```dart
+Card(
+  elevation: 0,  // 使用边框代替阴影
+  shape: RoundedRectangleBorder(
+    borderRadius: BorderRadius.circular(BorderRadius.lg),
+    side: BorderSide(
+      color: Theme.of(context).colorScheme.border,
+      width: 1,
+    ),
+  ),
+  color: Theme.of(context).colorScheme.cardBackground,
+  child: Padding(
+    padding: EdgeInsets.all(Spacing.md),
+    child: Column(...),
+  ),
+)
+```
+
+### 3. 输入框
+
+```dart
+TextFormField(
+  decoration: InputDecoration(
+    filled: true,
+    fillColor: Theme.of(context).colorScheme.cardBackground,
+    border: OutlineInputBorder(
+      borderRadius: BorderRadius.circular(BorderRadius.md),
+      borderSide: BorderSide(color: Theme.of(context).colorScheme.border),
+    ),
+    enabledBorder: OutlineInputBorder(
+      borderRadius: BorderRadius.circular(BorderRadius.md),
+      borderSide: BorderSide(color: Theme.of(context).colorScheme.border),
+    ),
+    focusedBorder: OutlineInputBorder(
+      borderRadius: BorderRadius.circular(BorderRadius.md),
+      borderSide: BorderSide(
+        color: Theme.of(context).colorScheme.primary,
+        width: 2,
+      ),
+    ),
+    contentPadding: EdgeInsets.symmetric(
+      horizontal: Spacing.md,
+      vertical: Spacing.sm,
+    ),
+  ),
+)
+```
+
+### 4. 现代弹窗
+
+#### 标准弹窗
+```dart
+showDialog(
+  context: context,
+  builder: (context) => Dialog(
+    shape: RoundedRectangleBorder(
+      borderRadius: BorderRadius.circular(BorderRadius.xl),
+    ),
+    backgroundColor: Theme.of(context).colorScheme.cardBackground,
+    child: Container(
+      padding: EdgeInsets.all(Spacing.lg),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // 标题
+          Text(
+            'Dialog Title',
+            style: Theme.of(context).textTheme.displaySmall,
+          ),
+          SizedBox(height: Spacing.md),
+          // 内容
+          Text('Dialog content here...'),
+          SizedBox(height: Spacing.lg),
+          // 按钮
+          Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              TextButton(child: Text('Cancel')),
+              SizedBox(width: Spacing.sm),
+              ElevatedButton(child: Text('Confirm')),
+            ],
+          ),
+        ],
+      ),
+    ),
+  ),
+);
+```
+
+#### 底部抽屉（Bottom Sheet）
+```dart
+showModalBottomSheet(
+  context: context,
+  isScrollControlled: true,
+  backgroundColor: Colors.transparent,
+  builder: (context) => Container(
+    decoration: BoxDecoration(
+      color: Theme.of(context).colorScheme.cardBackground,
+      borderRadius: BorderRadius.vertical(
+        top: Radius.circular(BorderRadius.xl),
+      ),
+    ),
+    padding: EdgeInsets.all(Spacing.lg),
+    child: Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        // 拖动指示器
+        Container(
+          width: 40,
+          height: 4,
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.muted,
+            borderRadius: BorderRadius.circular(2),
+          ),
+        ),
+        SizedBox(height: Spacing.md),
+        // 内容
+        ...
+      ],
+    ),
+  ),
+);
+```
+
+### 5. 列表项
+
+```dart
+ListTile(
+  contentPadding: EdgeInsets.symmetric(
+    horizontal: Spacing.md,
+    vertical: Spacing.sm,
+  ),
+  leading: Container(
+    width: 40,
+    height: 40,
+    decoration: BoxDecoration(
+      color: Theme.of(context).colorScheme.secondary,
+      borderRadius: BorderRadius.circular(BorderRadius.md),
+    ),
+    child: Icon(icon, size: 20),
+  ),
+  title: Text(
+    title,
+    style: Theme.of(context).textTheme.bodyLarge,
+  ),
+  subtitle: Text(
+    subtitle,
+    style: Theme.of(context).textTheme.bodySmall,
+  ),
+  trailing: Icon(Icons.chevron_right, size: 20),
+)
+```
+
+## 页面布局规范
+
+### 1. 通用布局
+
+```dart
+Scaffold(
+  backgroundColor: Theme.of(context).colorScheme.background,
+  appBar: AppBar(
+    backgroundColor: Theme.of(context).colorScheme.background,
+    elevation: 0,
+    title: Text('Page Title'),
+  ),
+  body: SafeArea(
+    child: SingleChildScrollView(
+      padding: EdgeInsets.all(Spacing.md),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // 内容
+        ],
+      ),
+    ),
+  ),
+)
+```
+
+### 2. 响应式布局
+
+```dart
+LayoutBuilder(
+  builder: (context, constraints) {
+    if (constraints.maxWidth >= 1024) {
+      // 桌面布局
+      return _DesktopLayout();
+    } else if (constraints.maxWidth >= 768) {
+      // 平板布局
+      return _TabletLayout();
+    } else {
+      // 移动布局
+      return _MobileLayout();
+    }
+  },
+)
+```
+
+## 主题切换实现
+
+### 1. 主题 Provider
+
+```dart
+class ThemeProvider extends ChangeNotifier {
+  ThemeMode _themeMode = ThemeMode.system;
+  
+  ThemeMode get themeMode => _themeMode;
+  
+  void toggleTheme() {
+    _themeMode = _themeMode == ThemeMode.light 
+        ? ThemeMode.dark 
+        : ThemeMode.light;
+    notifyListeners();
+  }
+  
+  void setTheme(ThemeMode mode) {
+    _themeMode = mode;
+    notifyListeners();
+  }
+}
+```
+
+### 2. 主题切换按钮
+
+```dart
+IconButton(
+  icon: Icon(
+    Provider.of<ThemeProvider>(context).themeMode == ThemeMode.light
+        ? Icons.dark_mode
+        : Icons.light_mode,
+  ),
+  onPressed: () {
+    Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
+  },
+)
+```
+
+## 无障碍设计
+
+### 1. 对比度
+- 所有文字/背景组合 >= 4.5:1（WCAG AA）
+- 大文字（18sp+）>= 3:1
+
+### 2. 触摸目标
+- 最小触摸目标 44x44
+
+### 3. 语义化
+```dart
+Semantics(
+  label: 'Submit button',
+  button: true,
+  child: ElevatedButton(...),
+)
+```
+
+## 禁止事项
+
+- ❌ 使用过时的 Bootstrap 蓝 (#007bff)
+- ❌ 沉重的阴影
+- ❌ 复杂的渐变
+- ❌ 文字与背景颜色相同
+- ❌ 对比度 < 4.5:1
+- ❌ 触摸目标 < 44x44
+- ❌ 硬编码颜色值
+- ❌ 不一致的间距/圆角
+
+## 验证清单
+
+- [ ] 明暗主题切换正常
+- [ ] 所有页面风格一致
+- [ ] 对比度 >= 4.5:1
+- [ ] 触摸目标 >= 44x44
+- [ ] flutter analyze 无错误
+- [ ] 响应式布局正常
+- [ ] 动画流畅（60fps）
+- [ ] 无硬编码颜色
+- [ ] 间距/圆角一致