refactor(theme): 优化主题配色方案并统一设计语言
- 更新 CLAUDE.md 中的技能系统执行逻辑，简化任务处理流程 - 重构 app_color_scheme.dart 中的颜色定义，将深色主题主色从专业蓝改为真金色，浅色主题主色从专业蓝改为深灰色 - 统一盈利颜色为绿色调色板，更新渐变和容器颜色以保持一致性 - 调整 app_theme_extension.dart 中的强调色引用，确保深色主题使用金色作为主强调色 - 优化颜色命名和注释，使设计意图更清晰
This commit is contained in:
@@ -1,15 +1,15 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
|
||||
/// Material Design 3 颜色系统 - "黑金传奇" & "白金殿堂"
|
||||
/// Material Design 3 颜色系统 - Pencil Design Theme
|
||||
///
|
||||
/// 深色主题: "黑金传奇" (Black & Gold)
|
||||
/// 深邃黑底 + 专业蓝主色 + 真金强调 → 赛博朋克科技感 × 金融奢华感
|
||||
/// 背景 #0A0E14 | 主色 #1E3A8A | 强调 #D4AF37
|
||||
/// 深邃黑底 + 真金主色 + 翠绿盈利 → 金融奢华感
|
||||
/// 背景 #0B1120 | 主色 #D4AF37 | 盈利 #4ADE80
|
||||
///
|
||||
/// 浅色主题: "白金殿堂" (White & Gold)
|
||||
/// 纯净白底 + 专业蓝主色 + 亮金强调 → 高端金融科技 × 尊贵品质感
|
||||
/// 背景 #FAFAFA | 主色 #1E40AF | 强调 #FFD700
|
||||
/// 纯净白底 + 深灰主色 + 琥珀强调 → 高端金融科技
|
||||
/// 背景 #F8FAFC | 主色 #1F2937 | 强调 #F59E0B
|
||||
///
|
||||
/// 设计原则：
|
||||
/// - Material Design 3 配色方案
|
||||
@@ -48,16 +48,16 @@ class AppColorScheme {
|
||||
static const Color darkOutline = Color(0xFF64748B);
|
||||
static const Color darkOutlineVariant = Color(0xFF334155);
|
||||
|
||||
/// Primary - 专业蓝 #1E3A8A (主要交互)
|
||||
static const Color darkPrimary = Color(0xFF1E3A8A);
|
||||
static const Color darkPrimaryDim = Color(0xFF1E40AF);
|
||||
static const Color darkPrimaryContainer = Color(0xFF3B82F6);
|
||||
static const Color darkPrimaryFixed = Color(0xFF3B82F6);
|
||||
static const Color darkPrimaryFixedDim = Color(0xFF2563EB);
|
||||
static const Color darkOnPrimary = Color(0xFFFFFFFF);
|
||||
static const Color darkOnPrimaryContainer = Color(0xFFBFDBFE);
|
||||
static const Color darkOnPrimaryFixed = Color(0xFFFFFFFF);
|
||||
static const Color darkOnPrimaryFixedVariant = Color(0xFFE0E7FF);
|
||||
/// Primary - 真金 #D4AF37 (accent-primary)
|
||||
static const Color darkPrimary = Color(0xFFD4AF37);
|
||||
static const Color darkPrimaryDim = Color(0xFFB8960E);
|
||||
static const Color darkPrimaryContainer = Color(0xFFE8C84A);
|
||||
static const Color darkPrimaryFixed = Color(0xFFE8C84A);
|
||||
static const Color darkPrimaryFixedDim = Color(0xFFD4AF37);
|
||||
static const Color darkOnPrimary = Color(0xFF1F2937);
|
||||
static const Color darkOnPrimaryContainer = Color(0xFF1F2937);
|
||||
static const Color darkOnPrimaryFixed = Color(0xFF1F2937);
|
||||
static const Color darkOnPrimaryFixedVariant = Color(0xFF374151);
|
||||
|
||||
/// Secondary - 真金 #D4AF37 (黑金强调色)
|
||||
static const Color darkSecondary = Color(0xFFD4AF37);
|
||||
@@ -70,16 +70,16 @@ class AppColorScheme {
|
||||
static const Color darkOnSecondaryFixed = Color(0xFF1F2937);
|
||||
static const Color darkOnSecondaryFixedVariant = Color(0xFF374151);
|
||||
|
||||
/// Tertiary - Neon Green (绿色 - 仅用于成功/盈利/买入)
|
||||
static const Color darkTertiary = Color(0xFFafffd1);
|
||||
static const Color darkTertiaryDim = Color(0xFF00efa0);
|
||||
static const Color darkTertiaryContainer = Color(0xFF00ffab);
|
||||
static const Color darkTertiaryFixed = Color(0xFF00ffab);
|
||||
static const Color darkTertiaryFixedDim = Color(0xFF00efa0);
|
||||
static const Color darkOnTertiary = Color(0xFF006642);
|
||||
static const Color darkOnTertiaryContainer = Color(0xFF005c3b);
|
||||
static const Color darkOnTertiaryFixed = Color(0xFF00472d);
|
||||
static const Color darkOnTertiaryFixedVariant = Color(0xFF006742);
|
||||
/// Tertiary - Profit Green #4ADE80 (profit-green)
|
||||
static const Color darkTertiary = Color(0xFF4ADE80);
|
||||
static const Color darkTertiaryDim = Color(0xFF22C55E);
|
||||
static const Color darkTertiaryContainer = Color(0xFF86EFAC);
|
||||
static const Color darkTertiaryFixed = Color(0xFF86EFAC);
|
||||
static const Color darkTertiaryFixedDim = Color(0xFF4ADE80);
|
||||
static const Color darkOnTertiary = Color(0xFF052E16);
|
||||
static const Color darkOnTertiaryContainer = Color(0xFF052E16);
|
||||
static const Color darkOnTertiaryFixed = Color(0xFF052E16);
|
||||
static const Color darkOnTertiaryFixedVariant = Color(0xFF14532D);
|
||||
|
||||
/// Error - Neon Red (红色 - 错误/卖出)
|
||||
static const Color darkError = Color(0xFFff716c);
|
||||
@@ -113,20 +113,20 @@ class AppColorScheme {
|
||||
static const Color lightSurfaceHigh = Color(0xFFE2E8F0);
|
||||
static const Color lightSurfaceHighest = Color(0xFFCBD5E1);
|
||||
|
||||
/// Ghost Border - Slate 300
|
||||
static const Color lightOutlineVariant = Color(0xFFCBD5E1);
|
||||
/// Ghost Border - Pencil border-default
|
||||
static const Color lightOutlineVariant = Color(0xFFE2E8F0);
|
||||
|
||||
/// Primary - 专业蓝 #1E40AF (主要交互)
|
||||
static const Color lightPrimary = Color(0xFF1E40AF);
|
||||
static const Color lightPrimaryContainer = Color(0xFF3B82F6);
|
||||
/// Primary - Dark Slate #1F2937 (accent-primary)
|
||||
static const Color lightPrimary = Color(0xFF1F2937);
|
||||
static const Color lightPrimaryContainer = Color(0xFFF3F4F6);
|
||||
|
||||
/// Secondary - 亮金 #D4AF37 (白金强调色)
|
||||
static const Color lightSecondary = Color(0xFFD4AF37);
|
||||
static const Color lightSecondaryContainer = Color(0xFFFFE44D);
|
||||
/// Secondary - Amber #F59E0B (gold-accent)
|
||||
static const Color lightSecondary = Color(0xFFF59E0B);
|
||||
static const Color lightSecondaryContainer = Color(0xFFFDE68A);
|
||||
|
||||
/// Tertiary - Success (买入/盈利)
|
||||
static const Color lightTertiary = Color(0xFF00875A);
|
||||
static const Color lightTertiaryContainer = Color(0xFFd4f5e9);
|
||||
/// Tertiary - Profit Green #16A34A (profit-green)
|
||||
static const Color lightTertiary = Color(0xFF16A34A);
|
||||
static const Color lightTertiaryContainer = Color(0xFFDCFCE7);
|
||||
|
||||
/// 文本色 - Slate
|
||||
static const Color lightOnSurface = Color(0xFF0F172A);
|
||||
@@ -221,9 +221,9 @@ class AppColorScheme {
|
||||
end: Alignment(0.7, 0.7),
|
||||
);
|
||||
|
||||
/// 资产卡片渐变 - 蓝→金
|
||||
/// 资产卡片渐变 - 金色层次
|
||||
static const LinearGradient assetCardGradient = LinearGradient(
|
||||
colors: [darkPrimary, darkSecondary],
|
||||
colors: [darkPrimaryContainer, darkPrimary],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
@@ -242,17 +242,17 @@ class AppColorScheme {
|
||||
primary: darkPrimary,
|
||||
primaryForeground: darkOnPrimary,
|
||||
secondary: darkSecondary,
|
||||
secondaryForeground: darkOnSurface,
|
||||
secondaryForeground: darkOnSecondary,
|
||||
muted: darkSurfaceContainerHigh,
|
||||
mutedForeground: darkOnSurfaceVariant,
|
||||
accent: darkSecondary.withValues(alpha: 0.15),
|
||||
accentForeground: darkSecondary,
|
||||
accent: darkPrimary.withValues(alpha: 0.15),
|
||||
accentForeground: darkPrimary,
|
||||
destructive: error,
|
||||
destructiveForeground: darkOnSurface,
|
||||
border: darkOutlineVariant.withValues(alpha: 0.15),
|
||||
input: darkOutlineVariant.withValues(alpha: 0.15),
|
||||
ring: darkSecondary,
|
||||
selection: darkSecondary.withValues(alpha: 0.3),
|
||||
ring: darkPrimary,
|
||||
selection: darkPrimary.withValues(alpha: 0.3),
|
||||
);
|
||||
|
||||
// ============================================
|
||||
@@ -269,7 +269,7 @@ class AppColorScheme {
|
||||
primary: lightPrimary,
|
||||
primaryForeground: const Color(0xFFFFFFFF),
|
||||
secondary: lightSecondary,
|
||||
secondaryForeground: lightOnSurface,
|
||||
secondaryForeground: const Color(0xFFFFFFFF),
|
||||
muted: lightSurfaceHigh,
|
||||
mutedForeground: lightOnSurfaceVariant,
|
||||
accent: lightSecondary.withValues(alpha: 0.1),
|
||||
@@ -344,15 +344,15 @@ class AppColorScheme {
|
||||
primary: lightPrimary,
|
||||
onPrimary: const Color(0xFFFFFFFF),
|
||||
primaryContainer: lightPrimaryContainer,
|
||||
onPrimaryContainer: lightOnSurface,
|
||||
onPrimaryContainer: lightPrimary,
|
||||
secondary: lightSecondary,
|
||||
onSecondary: const Color(0xFFFFFFFF),
|
||||
secondaryContainer: lightSecondaryContainer,
|
||||
onSecondaryContainer: lightOnSurface,
|
||||
onSecondaryContainer: const Color(0xFF78350F),
|
||||
tertiary: lightTertiary,
|
||||
onTertiary: const Color(0xFFFFFFFF),
|
||||
tertiaryContainer: lightTertiaryContainer,
|
||||
onTertiaryContainer: lightOnSurface,
|
||||
onTertiaryContainer: const Color(0xFF052E16),
|
||||
error: lightError,
|
||||
onError: lightOnError,
|
||||
errorContainer: const Color(0xFFffeaea),
|
||||
|
||||
@@ -31,7 +31,7 @@ class AppThemeColors extends ThemeExtension<AppThemeColors> {
|
||||
final Color downBackground;
|
||||
|
||||
// ---- 强调色 ----
|
||||
/// 主强调色（dark: secondary 金色, light: primary 蓝色）
|
||||
/// 主强调色（dark: primary 金色, light: primary 深灰）
|
||||
final Color accentPrimary;
|
||||
|
||||
// ---- 光效 ----
|
||||
@@ -76,7 +76,7 @@ class AppThemeColors extends ThemeExtension<AppThemeColors> {
|
||||
upBackground: AppColorScheme.darkTertiary.withValues(alpha: 0.15),
|
||||
down: AppColorScheme.darkError,
|
||||
downBackground: AppColorScheme.darkError.withValues(alpha: 0.15),
|
||||
accentPrimary: AppColorScheme.darkSecondary,
|
||||
accentPrimary: AppColorScheme.darkPrimary,
|
||||
glowOpacity: 0.15,
|
||||
ghostBorder: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.15),
|
||||
ctaGradient: AppColorScheme.darkCtaGradient,
|
||||
@@ -84,7 +84,7 @@ class AppThemeColors extends ThemeExtension<AppThemeColors> {
|
||||
sellGradient: AppColorScheme.sellGradient,
|
||||
assetGradient: AppColorScheme.assetCardGradient,
|
||||
emeraldGradient: const LinearGradient(
|
||||
colors: [AppColorScheme.darkTertiary, Color(0xFF7de8b8)],
|
||||
colors: [AppColorScheme.darkTertiary, AppColorScheme.darkTertiaryContainer],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
@@ -115,7 +115,7 @@ class AppThemeColors extends ThemeExtension<AppThemeColors> {
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
emeraldGradient: const LinearGradient(
|
||||
colors: [AppColorScheme.lightTertiary, Color(0xFF00c987)],
|
||||
colors: [AppColorScheme.lightTertiary, AppColorScheme.lightTertiaryContainer],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user