feat(ui): 统一应用主题色为天空蓝并优化渐变背景
将应用主色调从 '#BBF246' 更改为 '#87CEEB'(天空蓝),并更新所有相关组件和页面中的颜色引用。同时为多个页面添加统一的渐变背景,提升视觉效果和用户体验。新增压力分析模态框组件,并优化压力计组件的交互与显示逻辑。更新应用图标和启动图资源。
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
// 原子调色板(与设计图一致)
|
||||
export const palette = {
|
||||
// Primary
|
||||
primary: '#BBF246',
|
||||
primary: '#87CEEB',
|
||||
ink: '#192126',
|
||||
|
||||
// Secondary / Neutrals
|
||||
@@ -18,10 +18,11 @@ export const palette = {
|
||||
purple: '#A48AED',
|
||||
red: '#ED4747',
|
||||
orange: '#FCC46F',
|
||||
blue: '#95CCE3',
|
||||
blue: '#87CEEB', // 更贴近logo背景的天空蓝
|
||||
blueSecondary: '#4682B4', // 钢蓝色,用于选中状态
|
||||
} as const;
|
||||
|
||||
const primaryColor = palette.primary; // 应用主题色
|
||||
const primaryColor = palette.blue; // 应用主题色
|
||||
const tintColorLight = primaryColor;
|
||||
const tintColorDark = '#FFFFFF';
|
||||
|
||||
@@ -35,6 +36,8 @@ export const Colors = {
|
||||
surface: '#FFFFFF',
|
||||
card: '#FFFFFF',
|
||||
|
||||
buttonBackground: palette.blue,
|
||||
|
||||
// 品牌与可交互主色
|
||||
tint: tintColorLight,
|
||||
primary: primaryColor,
|
||||
@@ -51,6 +54,12 @@ export const Colors = {
|
||||
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% 透明度
|
||||
@@ -64,10 +73,14 @@ export const Colors = {
|
||||
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
|
||||
|
||||
// 页面氛围与装饰(新)
|
||||
pageBackgroundEmphasis: '#F9FBF2',
|
||||
heroSurfaceTint: 'rgba(187,242,70,0.18)',
|
||||
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: {
|
||||
// 基础文本/背景
|
||||
@@ -94,6 +107,11 @@ export const Colors = {
|
||||
danger: palette.red,
|
||||
info: palette.blue,
|
||||
accentPurple: palette.purple,
|
||||
accentGreenDark: '#2D5016', // 深绿色,用于文本和强调
|
||||
|
||||
// 日期选择器主题色
|
||||
datePickerNormal: palette.blue,
|
||||
datePickerSelected: palette.blueSecondary,
|
||||
|
||||
// 结构色
|
||||
border: '#2A2F32',
|
||||
@@ -111,5 +129,9 @@ export const Colors = {
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user