feat(theme): update color scheme with new Slate theme and improved surface hierarchy

Updated the app's color scheme to implement a new "Slate" theme with refined dark and light variants. Changed background colors from #0A0E14 to #0B1120 for dark mode and updated surface layer colors to follow Material Design 3 specifications. Modified text colors and outline variants for better contrast and accessibility. Updated font sizes in transaction details screen from 11px to 12px for improved readability.
This commit is contained in:
2026-04-05 22:24:04 +08:00
parent e2624b845a
commit d8cd38c4de
17 changed files with 3980 additions and 2922 deletions

View File

@@ -20,23 +20,23 @@ class AppColorScheme {
AppColorScheme._();
// ============================================
// 深色主题 - "黑金传奇" (Material Design 3)
// 背景 #0A0E14 | 主色 #1E3A8A | 强调 #D4AF37
// 深色主题 - "Slate Dark" (Material Design 3)
// 背景 #0B1120 | 主色 #1E3A8A | 强调 #D4AF37
// ============================================
/// 背景基色 - 深邃
static const Color darkBackground = Color(0xFF0A0E14);
/// 背景基色 - Slate 深蓝
static const Color darkBackground = Color(0xFF0B1120);
/// Surface 层次 (从低到高) - Material Design 3 规范
static const Color darkSurfaceDim = Color(0xFF0A0E14);
static const Color darkSurfaceDim = Color(0xFF0B1120);
static const Color darkSurfaceLowest = Color(0xFF000000);
static const Color darkSurfaceLow = Color(0xFF0F1219);
static const Color darkSurface = Color(0xFF0A0E14);
static const Color darkSurfaceContainer = Color(0xFF151921);
static const Color darkSurfaceContainerHigh = Color(0xFF1B1F28);
static const Color darkSurfaceContainerHighest = Color(0xFF21252F);
static const Color darkSurfaceBright = Color(0xFF272B35);
static const Color darkSurfaceVariant = Color(0xFF21252F);
static const Color darkSurfaceLow = Color(0xFF0F172A);
static const Color darkSurface = Color(0xFF0B1120);
static const Color darkSurfaceContainer = Color(0xFF0F172A);
static const Color darkSurfaceContainerHigh = Color(0xFF1E293B);
static const Color darkSurfaceContainerHighest = Color(0xFF253349);
static const Color darkSurfaceBright = Color(0xFF334155);
static const Color darkSurfaceVariant = Color(0xFF1E293B);
/// 兼容旧名称
static const Color darkSurfaceContainerLowest = darkSurfaceLowest;
@@ -45,8 +45,8 @@ class AppColorScheme {
static const Color darkSurfaceHighest = darkSurfaceContainerHighest;
/// Ghost Border
static const Color darkOutline = Color(0xFF73757d);
static const Color darkOutlineVariant = Color(0xFF45484f);
static const Color darkOutline = Color(0xFF64748B);
static const Color darkOutlineVariant = Color(0xFF334155);
/// Primary - 专业蓝 #1E3A8A (主要交互)
static const Color darkPrimary = Color(0xFF1E3A8A);
@@ -89,38 +89,38 @@ class AppColorScheme {
static const Color darkOnErrorContainer = Color(0xFFffa8a3);
/// 文本色
static const Color darkOnSurface = Color(0xFFecedf6);
static const Color darkOnSurfaceVariant = Color(0xFFa9abb3);
static const Color darkOnSurfaceMuted = Color(0xFF6b6d75);
static const Color darkOnBackground = Color(0xFFecedf6);
static const Color darkInverseSurface = Color(0xFFf9f9ff);
static const Color darkInverseOnSurface = Color(0xFF52555c);
static const Color darkOnSurface = Color(0xFFF8FAFC);
static const Color darkOnSurfaceVariant = Color(0xFF94A3B8);
static const Color darkOnSurfaceMuted = Color(0xFF64748B);
static const Color darkOnBackground = Color(0xFFF8FAFC);
static const Color darkInverseSurface = Color(0xFFF8FAFC);
static const Color darkInverseOnSurface = Color(0xFF475569);
static const Color darkInversePrimary = Color(0xFF1E40AF);
static const Color darkSurfaceTint = Color(0xFFD4AF37);
// ============================================
// 浅色主题 - "白金殿堂"
// 背景 #FAFAFA | 主色 #1E40AF | 强调 #FFD700
// 浅色主题 - "Slate Light" (Material Design 3)
// 背景 #F8FAFC | 主色 #1E40AF | 强调 #D4AF37
// ============================================
/// 背景基色 - 纯净白
static const Color lightBackground = Color(0xFFFAFAFA);
/// 背景基色 - Slate 50
static const Color lightBackground = Color(0xFFF8FAFC);
/// Surface 层次 (从低到高)
static const Color lightSurfaceLowest = Color(0xFFffffff);
static const Color lightSurfaceLow = Color(0xFFF5F5F5);
static const Color lightSurface = Color(0xFFFAFAFA);
static const Color lightSurfaceHigh = Color(0xFFF0F0F0);
static const Color lightSurfaceHighest = Color(0xFFE8E8E8);
static const Color lightSurfaceLowest = Color(0xFFFFFFFF);
static const Color lightSurfaceLow = Color(0xFFF1F5F9);
static const Color lightSurface = Color(0xFFF8FAFC);
static const Color lightSurfaceHigh = Color(0xFFE2E8F0);
static const Color lightSurfaceHighest = Color(0xFFCBD5E1);
/// Ghost Border
static const Color lightOutlineVariant = Color(0xFFD0D0D0);
/// Ghost Border - Slate 300
static const Color lightOutlineVariant = Color(0xFFCBD5E1);
/// Primary - 专业蓝 #1E40AF (主要交互)
static const Color lightPrimary = Color(0xFF1E40AF);
static const Color lightPrimaryContainer = Color(0xFF3B82F6);
/// Secondary - 亮金 #FFD700 (白金强调色)
/// Secondary - 亮金 #D4AF37 (白金强调色)
static const Color lightSecondary = Color(0xFFD4AF37);
static const Color lightSecondaryContainer = Color(0xFFFFE44D);
@@ -128,10 +128,10 @@ class AppColorScheme {
static const Color lightTertiary = Color(0xFF00875A);
static const Color lightTertiaryContainer = Color(0xFFd4f5e9);
/// 文本色
static const Color lightOnSurface = Color(0xFF1A1A1A);
static const Color lightOnSurfaceVariant = Color(0xFF5a5d60);
static const Color lightOnSurfaceMuted = Color(0xFF8a8d90);
/// 文本色 - Slate
static const Color lightOnSurface = Color(0xFF0F172A);
static const Color lightOnSurfaceVariant = Color(0xFF475569);
static const Color lightOnSurfaceMuted = Color(0xFF94A3B8);
// ============================================
// Glass Panel 毛玻璃效果颜色
@@ -369,19 +369,19 @@ class AppColorScheme {
// ============================================
/// 浅色主题 Error 色
static const Color lightError = Color(0xFFd7383b);
static const Color lightError = Color(0xFFDC2626);
static const Color lightOnError = Color(0xFFFFFFFF);
/// 浅色主题 Outline 色
static const Color lightOutline = Color(0xFF73757d);
/// 浅色主题 Outline 色 - Slate 500
static const Color lightOutline = Color(0xFF64748B);
/// 浅色主题 Surface 色 (扩展)
static const Color lightSurfaceBright = Color(0xFFffffff);
static const Color lightSurfaceDim = Color(0xFFF0F0F0);
static const Color lightSurfaceVariant = Color(0xFFF0F0F0);
static const Color lightSurfaceContainer = Color(0xFFF5F5F5);
static const Color lightSurfaceContainerHigh = Color(0xFFF0F0F0);
static const Color lightSurfaceContainerHighest = Color(0xFFE8E8E8);
/// 浅色主题 Surface 色 (扩展) - Slate 系列
static const Color lightSurfaceBright = Color(0xFFFFFFFF);
static const Color lightSurfaceDim = Color(0xFFE2E8F0);
static const Color lightSurfaceVariant = Color(0xFFE2E8F0);
static const Color lightSurfaceContainer = Color(0xFFF1F5F9);
static const Color lightSurfaceContainerHigh = Color(0xFFE2E8F0);
static const Color lightSurfaceContainerHighest = Color(0xFFCBD5E1);
static ColorScheme get lightMaterial => ColorScheme.light(
primary: lightPrimary,
@@ -419,62 +419,44 @@ class AppColorScheme {
);
// ============================================
// 兼容性常量 (已废弃,保留向后兼容)
// 兼容性别名(替代 theme/app_colors.dart
// 映射旧名到新系统,避免 breaking change
// ============================================
@Deprecated('Use darkPrimary instead')
static const Color primaryDark = darkPrimary;
// 背景色
static const Color background = darkBackground;
static const Color cardBackground = darkSurfaceContainer;
static const Color inputBackground = darkSurfaceContainerHigh;
static const Color scaffoldBackground = darkBackground;
static const Color modalBackground = darkSurfaceContainerHigh;
static const Color hoverBackground = darkSurfaceBright;
@Deprecated('Use lightPrimary instead')
static const Color primaryLight = lightPrimary;
// 文字色
static const Color textPrimary = darkOnSurface;
static const Color textSecondary = darkOnSurfaceVariant;
static const Color textHint = darkOnSurfaceMuted;
static const Color textDisabled = darkInverseSurface;
static const Color textLink = darkPrimary;
@Deprecated('Use darkBackground instead')
static const Color _darkBackground = darkBackground;
// 边框色
static const Color border = darkOutlineVariant;
static const Color divider = darkSurfaceContainer;
static const Color inputBorder = darkOnSurfaceMuted;
static const Color inputFocusBorder = darkPrimary;
static const Color focusBorder = darkPrimary;
@Deprecated('Use darkSurfaceContainer instead')
static const Color _darkCardBackground = darkSurfaceContainer;
// 交易类型色
static const Color deposit = up;
static const Color withdraw = warning;
static const Color trade = info;
@Deprecated('Use darkSurfaceContainerHigh instead')
static const Color _darkSecondary = darkSurfaceContainerHigh;
@Deprecated('Use darkSurfaceContainerHigh instead')
static const Color _darkMuted = darkSurfaceContainerHigh;
@Deprecated('Use darkOutlineVariant instead')
static const Color _darkBorder = darkOutlineVariant;
@Deprecated('Use darkOnSurface instead')
static const Color _darkTextPrimary = darkOnSurface;
@Deprecated('Use darkOnSurfaceVariant instead')
static const Color _darkTextSecondary = darkOnSurfaceVariant;
@Deprecated('Use darkOnSurfaceMuted instead')
static const Color _darkTextHint = darkOnSurfaceMuted;
@Deprecated('Use lightBackground instead')
static const Color _lightBackground = lightBackground;
@Deprecated('Use lightSurfaceLowest instead')
static const Color _lightCardBackground = lightSurfaceLowest;
@Deprecated('Use lightSurfaceHigh instead')
static const Color _lightSecondary = lightSurfaceHigh;
@Deprecated('Use lightSurfaceHigh instead')
static const Color _lightMuted = lightSurfaceHigh;
@Deprecated('Use lightOutlineVariant instead')
static const Color _lightBorder = lightOutlineVariant;
@Deprecated('Use lightOnSurface instead')
static const Color _lightTextPrimary = lightOnSurface;
@Deprecated('Use lightOnSurfaceVariant instead')
static const Color _lightTextSecondary = lightOnSurfaceVariant;
@Deprecated('Use lightOnSurfaceMuted instead')
static const Color _lightTextHint = lightOnSurfaceMuted;
// 旧渐变
static const List<Color> gradientColors = [darkPrimary, darkPrimaryContainer];
static const LinearGradient primaryGradient = LinearGradient(
colors: [darkPrimary, darkPrimaryContainer],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
}
/// 创建 Shadcn 深色主题

View File

@@ -1,145 +0,0 @@
import 'package:flutter/material.dart';
/// 数字货币应用颜色系统
///
/// 设计原则:
/// 1. 所有文字与背景对比度 >= 4.5:1 (WCAG AA)
/// 2. 涨跌色使用国际通用标准 (绿涨红跌)
/// 3. 背景色层次分明,易于区分
/// 4. 杜绝文字和背景颜色一样无法区分的情况
class AppColors {
AppColors._();
// ============================================
// 品牌色 (Brand Colors) - 专业蓝
// ============================================
/// 主色 - 专业蓝,代表信任与稳定
static const Color primary = Color(0xFF2563EB);
static const Color primaryLight = Color(0xFF3B82F6);
static const Color primaryDark = Color(0xFF1D4ED8);
/// 主色渐变 - 用于卡片、按钮等
static const LinearGradient primaryGradient = LinearGradient(
colors: [primary, primaryDark],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
// ============================================
// 交易色 (Trading Colors)
// ============================================
/// 涨/买入 - 标准绿色 (国际通用)
static const Color up = Color(0xFF00C853);
/// 跌/卖出 - 标准红色 (国际通用)
static const Color down = Color(0xFFFF5252);
/// 买入按钮渐变
static const LinearGradient buyGradient = LinearGradient(
colors: [Color(0xFF00C853), Color(0xFF00A844)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
/// 卖出按钮渐变
static const LinearGradient sellGradient = LinearGradient(
colors: [Color(0xFFFF5252), Color(0xFFD32F2F)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
// ============================================
// 功能色 (Semantic Colors)
// ============================================
/// 成功
static const Color success = Color(0xFF00C853);
/// 警告
static const Color warning = Color(0xFFFF9800);
/// 错误
static const Color error = Color(0xFFFF5252);
/// 信息
static const Color info = Color(0xFF2196F3);
/// 充值
static const Color deposit = Color(0xFF00C853);
/// 提现
static const Color withdraw = Color(0xFFFF9800);
/// 划转/交易
static const Color trade = Color(0xFF2196F3);
// ============================================
// 背景色 (Dark Theme Backgrounds)
// ============================================
/// 页面背景 - 最深
static const Color background = Color(0xFF0F0F1A);
/// 卡片背景 - 中等深度
static const Color cardBackground = Color(0xFF1A1A2E);
/// 输入框背景 - 稍浅
static const Color inputBackground = Color(0xFF16213E);
/// Scaffold 背景 (兼容旧代码)
static const Color scaffoldBackground = Color(0xFF0F0F1A);
/// 模态框背景
static const Color modalBackground = Color(0xFF1E1E32);
// ============================================
// 文字颜色 (Text Colors)
// ============================================
/// 主要文字 - 白色,对比度 21:1
static const Color textPrimary = Color(0xFFFFFFFF);
/// 次要文字 - 浅灰蓝,对比度约 8:1
static const Color textSecondary = Color(0xFFB0B0C0);
/// 提示文字 - 中灰,对比度约 4.7:1
static const Color textHint = Color(0xFF6B6B80);
/// 禁用文字 - 暗灰
static const Color textDisabled = Color(0xFF4A4A5A);
/// 链接文字 - 品牌蓝
static const Color textLink = Color(0xFF2563EB);
// ============================================
// 边框与分割线 (Borders & Dividers)
// ============================================
/// 边框 - 低透明度白色
static const Color border = Color(0x14FFFFFF); // 8% white
/// 分割线 - 更低透明度
static const Color divider = Color(0x0FFFFFFF); // 6% white
/// 输入框边框
static const Color inputBorder = Color(0x1AFFFFFF); // 10% white
/// 输入框聚焦边框 - 品牌蓝
static const Color inputFocusBorder = Color(0xFF2563EB);
// ============================================
// 便捷方法
// ============================================
/// 根据涨跌获取颜色
static Color getChangeColor(bool isUp) => isUp ? up : down;
/// 获取带透明度的涨跌背景色
static Color getChangeBackgroundColor(bool isUp) =>
isUp ? up.withValues(alpha: 0.15) : down.withValues(alpha: 0.15);
/// 渐变色 (兼容旧代码) - 品牌蓝
static const List<Color> gradientColors = [Color(0xFF2563EB), Color(0xFF1D4ED8)];
}

View File

@@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'app_colors.dart';
import 'app_color_scheme.dart';
/// 文字样式系统
///
@@ -16,7 +16,7 @@ class AppTextStyles {
static const TextStyle h1 = TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.3,
);
@@ -24,7 +24,7 @@ class AppTextStyles {
static const TextStyle h2 = TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.3,
);
@@ -32,7 +32,7 @@ class AppTextStyles {
static const TextStyle h3 = TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.4,
);
@@ -40,7 +40,7 @@ class AppTextStyles {
static const TextStyle h4 = TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.4,
);
@@ -52,7 +52,7 @@ class AppTextStyles {
static const TextStyle body1 = TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.5,
);
@@ -60,7 +60,7 @@ class AppTextStyles {
static const TextStyle body2 = TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.5,
);
@@ -72,7 +72,7 @@ class AppTextStyles {
static const TextStyle caption = TextStyle(
fontSize: 12,
fontWeight: FontWeight.normal,
color: AppColors.textSecondary,
color: AppColorScheme.textSecondary,
height: 1.4,
);
@@ -80,7 +80,7 @@ class AppTextStyles {
static const TextStyle small = TextStyle(
fontSize: 11,
fontWeight: FontWeight.normal,
color: AppColors.textSecondary,
color: AppColorScheme.textSecondary,
height: 1.3,
);
@@ -88,7 +88,7 @@ class AppTextStyles {
static const TextStyle hint = TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: AppColors.textHint,
color: AppColorScheme.textHint,
height: 1.4,
);
@@ -100,7 +100,7 @@ class AppTextStyles {
static const TextStyle amount = TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.2,
fontFeatures: [FontFeature.tabularFigures()],
);
@@ -109,7 +109,7 @@ class AppTextStyles {
static const TextStyle price = TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.3,
fontFeatures: [FontFeature.tabularFigures()],
);
@@ -126,7 +126,7 @@ class AppTextStyles {
static const TextStyle button = TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
color: AppColorScheme.textPrimary,
height: 1.2,
);
@@ -134,7 +134,7 @@ class AppTextStyles {
static const TextStyle link = TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: AppColors.textLink,
color: AppColorScheme.textLink,
decoration: TextDecoration.underline,
height: 1.4,
);