d76ba48424
将应用主色调从 '#BBF246' 更改为 '#87CEEB'（天空蓝），并更新所有相关组件和页面中的颜色引用。同时为多个页面添加统一的渐变背景，提升视觉效果和用户体验。新增压力分析模态框组件，并优化压力计组件的交互与显示逻辑。更新应用图标和启动图资源。
138 lines
4.0 KiB
TypeScript
138 lines
4.0 KiB
TypeScript
/**
|
|
* 应用全局配色规范（来自设计规范图）。
|
|
* 说明：保持原有导出结构不变，同时扩展更完整的语义令牌与原子调色板。
|
|
*/
|
|
|
|
// 原子调色板（与设计图一致）
|
|
export const palette = {
|
|
// Primary
|
|
primary: '#87CEEB',
|
|
ink: '#192126',
|
|
|
|
// Secondary / Neutrals
|
|
neutral100: '#888F92',
|
|
neutral200: '#5E6468',
|
|
neutral300: '#384046',
|
|
|
|
// Accents
|
|
purple: '#A48AED',
|
|
red: '#ED4747',
|
|
orange: '#FCC46F',
|
|
blue: '#87CEEB', // 更贴近logo背景的天空蓝
|
|
blueSecondary: '#4682B4', // 钢蓝色，用于选中状态
|
|
} as const;
|
|
|
|
const primaryColor = palette.blue; // 应用主题色
|
|
const tintColorLight = primaryColor;
|
|
const tintColorDark = '#FFFFFF';
|
|
|
|
export const Colors = {
|
|
light: {
|
|
// 基础文本/背景
|
|
text: '#11181C',
|
|
textSecondary: palette.neutral300,
|
|
textMuted: palette.neutral200,
|
|
background: '#FFFFFF',
|
|
surface: '#FFFFFF',
|
|
card: '#FFFFFF',
|
|
|
|
buttonBackground: palette.blue,
|
|
|
|
// 品牌与可交互主色
|
|
tint: tintColorLight,
|
|
primary: primaryColor,
|
|
onPrimary: palette.ink, // 与主色搭配的前景色（按钮文字/图标）
|
|
|
|
// 中性色与辅助
|
|
neutral100: palette.neutral100,
|
|
neutral200: palette.neutral200,
|
|
neutral300: palette.neutral300,
|
|
|
|
// 状态/反馈色
|
|
success: palette.primary,
|
|
warning: palette.orange,
|
|
danger: palette.red,
|
|
info: palette.blue,
|
|
accentPurple: palette.purple,
|
|
accentGreen: palette.blue,
|
|
accentGreenDark: palette.blueSecondary, // 深绿色，用于文本和强调
|
|
|
|
// 日期选择器主题色
|
|
datePickerNormal: palette.blue,
|
|
datePickerSelected: palette.blueSecondary,
|
|
|
|
// 结构色
|
|
border: palette.neutral100 + '33', // 20% 透明度
|
|
separator: palette.neutral100 + '33',
|
|
icon: '#687076',
|
|
|
|
// Tab 相关（保持兼容）
|
|
tabIconDefault: '#687076',
|
|
tabIconSelected: palette.ink, // tab 激活时的文字/图标颜色（深色，在亮色背景上显示）
|
|
tabBarBackground: palette.ink, // tab 栏背景色
|
|
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
|
|
|
|
// 页面氛围与装饰（新）
|
|
pageBackgroundEmphasis: '#F0F8FF', // 淡蓝色背景强调
|
|
heroSurfaceTint: 'rgba(135,206,235,0.18)', // 蓝色调的表面色彩
|
|
ornamentPrimary: 'rgba(187,242,70,0.22)',
|
|
ornamentAccent: 'rgba(164,138,237,0.16)',
|
|
|
|
// 统一背景渐变色（基于 StressAnalysisModal 的设计）
|
|
backgroundGradientStart: '#d3e9eeff', // 浅蓝色起始 (与logo背景匹配)
|
|
backgroundGradientEnd: '#ffffff', // 白色结束
|
|
},
|
|
dark: {
|
|
// 基础文本/背景
|
|
text: '#ECEDEE',
|
|
textSecondary: palette.neutral100,
|
|
textMuted: '#9BA1A6',
|
|
background: '#151718',
|
|
surface: '#1A1D1E',
|
|
card: '#1A1D1E',
|
|
|
|
// 品牌与可交互主色
|
|
tint: tintColorDark,
|
|
primary: primaryColor,
|
|
onPrimary: palette.ink,
|
|
|
|
// 中性色与辅助
|
|
neutral100: palette.neutral100,
|
|
neutral200: palette.neutral200,
|
|
neutral300: palette.neutral300,
|
|
|
|
// 状态/反馈色
|
|
success: palette.primary,
|
|
warning: palette.orange,
|
|
danger: palette.red,
|
|
info: palette.blue,
|
|
accentPurple: palette.purple,
|
|
accentGreenDark: '#2D5016', // 深绿色，用于文本和强调
|
|
|
|
// 日期选择器主题色
|
|
datePickerNormal: palette.blue,
|
|
datePickerSelected: palette.blueSecondary,
|
|
|
|
// 结构色
|
|
border: '#2A2F32',
|
|
separator: '#2A2F32',
|
|
icon: '#9BA1A6',
|
|
|
|
// Tab 相关（保持兼容）
|
|
tabIconDefault: '#9BA1A6',
|
|
tabIconSelected: palette.ink, // 在亮色背景上使用深色文字
|
|
tabBarBackground: palette.ink,
|
|
tabBarActiveBackground: primaryColor,
|
|
|
|
// 页面氛围与装饰（新）
|
|
pageBackgroundEmphasis: '#151718',
|
|
heroSurfaceTint: 'rgba(187,242,70,0.12)',
|
|
ornamentPrimary: 'rgba(187,242,70,0.18)',
|
|
ornamentAccent: 'rgba(164,138,237,0.14)',
|
|
|
|
// 统一背景渐变色（深色模式）
|
|
backgroundGradientStart: '#0A0B0C', // 深黑色起始
|
|
backgroundGradientEnd: '#151718', // 背景色结束
|
|
},
|
|
} as const;
|