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:
@@ -1,155 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// 应用颜色常量 - 统一的颜色系统
|
||||
///
|
||||
/// 设计原则：
|
||||
/// 1. 语义化命名 - 颜色按用途命名，而非外观
|
||||
/// 2. 对比度保证 - 文字与背景对比度 >= 4.5:1 (WCAG AA)
|
||||
/// 3. 一致性 - 同一语义用途使用同一颜色
|
||||
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,
|
||||
);
|
||||
|
||||
// ============================================
|
||||
// 语义色 (Semantic Colors)
|
||||
// ============================================
|
||||
|
||||
/// 成功/上涨 - 绿色系
|
||||
static const Color success = Color(0xFF00C853);
|
||||
static const Color up = success;
|
||||
|
||||
/// 警告 - 橙色系
|
||||
static const Color warning = Color(0xFFFF9800);
|
||||
|
||||
/// 错误/下跌 - 红色系
|
||||
static const Color error = Color(0xFFFF5252);
|
||||
static const Color down = error;
|
||||
|
||||
/// 信息 - 蓝色系
|
||||
static const Color info = Color(0xFF2196F3);
|
||||
|
||||
/// 交易类型色
|
||||
static const Color deposit = success;
|
||||
static const Color withdraw = warning;
|
||||
static const Color trade = info;
|
||||
|
||||
// ============================================
|
||||
// 深色主题背景色 (Dark Theme Backgrounds)
|
||||
// ============================================
|
||||
|
||||
/// 主背景色 - 最深的背景
|
||||
static const Color background = Color(0xFF0F0F1A);
|
||||
|
||||
/// 卡片背景色
|
||||
static const Color cardBackground = Color(0xFF1A1A2E);
|
||||
|
||||
/// Scaffold 背景色
|
||||
static const Color scaffoldBackground = background;
|
||||
|
||||
/// 表面色 - 用于弹出层、对话框
|
||||
static const Color surface = Color(0xFF16213E);
|
||||
|
||||
/// 悬停状态背景
|
||||
static const Color hoverBackground = Color(0xFF252542);
|
||||
|
||||
// ============================================
|
||||
// 文字颜色 (Text Colors)
|
||||
// 对比度均 >= 4.5:1 (基于深色背景)
|
||||
// ============================================
|
||||
|
||||
/// 主要文字 - 白色，对比度 21:1
|
||||
static const Color textPrimary = Color(0xFFFFFFFF);
|
||||
|
||||
/// 次要文字 - 浅灰色，对比度 ~10:1
|
||||
static const Color textSecondary = Color(0xFFB0B0B0);
|
||||
|
||||
/// 提示文字 - 中灰色，对比度 ~5:1
|
||||
static const Color textHint = Color(0xFF808080);
|
||||
|
||||
/// 禁用文字 - 深灰色，对比度 ~3:1
|
||||
static const Color textDisabled = Color(0xFF4D4D4D);
|
||||
|
||||
/// 链接文字
|
||||
static const Color textLink = primary;
|
||||
|
||||
// ============================================
|
||||
// 边框和分割线 (Borders & Dividers)
|
||||
// ============================================
|
||||
|
||||
/// 默认边框色
|
||||
static const Color border = Color(0xFF2A2A45);
|
||||
|
||||
/// 分割线颜色
|
||||
static const Color divider = border;
|
||||
|
||||
/// 焦点边框色
|
||||
static const Color focusBorder = primary;
|
||||
|
||||
/// 输入框边框色
|
||||
static const Color inputBorder = Color(0xFF3A3A55);
|
||||
|
||||
// ============================================
|
||||
// 输入框颜色 (Input Colors)
|
||||
// ============================================
|
||||
|
||||
/// 输入框背景
|
||||
static const Color inputBackground = cardBackground;
|
||||
|
||||
/// 输入框焦点边框
|
||||
static const Color inputFocusBorder = primary;
|
||||
|
||||
// ============================================
|
||||
// 按钮渐变 (Button Gradients)
|
||||
// ============================================
|
||||
|
||||
/// 买入按钮渐变
|
||||
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,
|
||||
);
|
||||
|
||||
// ============================================
|
||||
// 渐变色 (Gradient Colors)
|
||||
// ============================================
|
||||
|
||||
/// 资产卡片渐变色
|
||||
static const List<Color> gradientColors = [primary, primaryDark];
|
||||
|
||||
// ============================================
|
||||
// 工具方法 (Utility Methods)
|
||||
// ============================================
|
||||
|
||||
/// 获取涨跌颜色
|
||||
static Color getChangeColor(bool isUp) => isUp ? up : down;
|
||||
|
||||
/// 获取涨跌背景色（带透明度）
|
||||
static Color getChangeBackgroundColor(bool isUp) =>
|
||||
isUp ? up.withValues(alpha: 0.15) : down.withValues(alpha: 0.15);
|
||||
}
|
||||
Reference in New Issue
Block a user