098c65b23e
- 在心情统计、日历和编辑页面中引入 HeaderBar 组件，提升界面一致性和用户体验 - 移除冗余的头部视图代码，简化组件结构 - 更新心情日历和编辑页面的样式，使用新的颜色常量，增强视觉效果 - 优化心情统计页面的加载状态显示，提升用户交互体验
139 lines
4.5 KiB
TypeScript
139 lines
4.5 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', // 钢蓝色，用于选中状态
|
|
green: '#9ceb87', // 温暖的绿色，用于心情日历等
|
|
} as const;
|
|
|
|
const primaryColor = palette.blue; // 应用主题色
|
|
const tintColorLight = primaryColor;
|
|
const tintColorDark = '#FFFFFF';
|
|
|
|
export const Colors = {
|
|
light: {
|
|
// 基础文本/背景（优化对比度）
|
|
text: '#1A2027', // 更深的文本色，提高可读性
|
|
textSecondary: '#4A5568', // 温和的次要文本色
|
|
textMuted: '#718096', // 柔和的静音文本色
|
|
background: '#FFFFFF',
|
|
surface: '#FFFFFF',
|
|
card: 'rgba(255,255,255,0.95)', // 半透明卡片，与渐变背景融合
|
|
|
|
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.green, // 温暖的绿色
|
|
accentGreenDark: palette.blueSecondary, // 深绿色，用于文本和强调
|
|
|
|
// 日期选择器主题色
|
|
datePickerNormal: palette.blue,
|
|
datePickerSelected: palette.green, // 使用温暖的绿色作为选中状态
|
|
|
|
// 结构色（优化后的蓝色主题）
|
|
border: 'rgba(135,206,235,0.2)', // 蓝色调边框
|
|
separator: 'rgba(135,206,235,0.15)', // 更淡的分隔线
|
|
icon: '#5A6C7D', // 蓝灰色图标
|
|
|
|
// Tab 相关（保持兼容）
|
|
tabIconDefault: '#687076',
|
|
tabIconSelected: palette.ink, // tab 激活时的文字/图标颜色（深色，在亮色背景上显示）
|
|
tabBarBackground: palette.ink, // tab 栏背景色
|
|
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
|
|
|
|
// 页面氛围与装饰（优化后的蓝色配色方案）
|
|
pageBackgroundEmphasis: '#F0F8FF', // 淡蓝色背景强调
|
|
heroSurfaceTint: 'rgba(135,206,235,0.12)', // 更柔和的蓝色调表面色彩
|
|
ornamentPrimary: 'rgba(135,206,235,0.15)', // 与主色调和的装饰色
|
|
ornamentAccent: 'rgba(70,130,180,0.12)', // 钢蓝色装饰，增加层次
|
|
|
|
// 优化的背景渐变色（更柔和的蓝色过渡）
|
|
backgroundGradientStart: '#E6F3FF', // 更柔和的浅蓝色起始
|
|
backgroundGradientEnd: '#FAFCFF', // 带有微蓝调的白色结束
|
|
},
|
|
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.green, // 使用温暖的绿色作为选中状态
|
|
|
|
// 结构色
|
|
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;
|