style(theme): 更新白天主题配色方案为清透玻璃感设计
- 调整白天主题基础背景色从 #FAF7F2 到 #F2F5F9 - 更新卡片、提升层和替代卡片背景色以匹配新主题 - 修改琥珀色系颜色值并调整透明度效果 - 更新珊瑚色、薄荷绿和薰衣草色的视觉表现 - 调整主次文字颜色以提高可读性 - 更新边框、分割线和阴影的颜色及透明度 - 优化导航栏和标签栏的配色方案 - 调整渐变卡片背景色以配合新主题风格
This commit is contained in:
@@ -51,51 +51,51 @@ page, .theme-dark {
|
||||
--tab-bar-color: #9494AC;
|
||||
}
|
||||
|
||||
/* --- 白天主题 --- */
|
||||
/* --- 白天主题(清透玻璃感 Crystal Day)--- */
|
||||
.theme-light {
|
||||
--bg-base: #FAF7F2;
|
||||
--bg-base: #F2F5F9;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-card-alt: #F0EDE6;
|
||||
--bg-elevated: #EAE5DA;
|
||||
--bg-card-alt: #EEF2F7;
|
||||
--bg-elevated: #E4EAF2;
|
||||
|
||||
--amber: #D49530;
|
||||
--amber-light: #E8A838;
|
||||
--amber-deep: #B87A1A;
|
||||
--amber-glow: rgba(212, 149, 48, 0.12);
|
||||
--amber: #E09B2D;
|
||||
--amber-light: #F2B84B;
|
||||
--amber-deep: #C67F15;
|
||||
--amber-glow: rgba(224, 155, 45, 0.10);
|
||||
|
||||
--coral: #E85555;
|
||||
--mint: #4AAF8A;
|
||||
--lavender: #7A7598;
|
||||
--coral: #F0655A;
|
||||
--mint: #34B88C;
|
||||
--lavender: #7C82A8;
|
||||
|
||||
--text-primary: #2C2416;
|
||||
--text-secondary: #8C8474;
|
||||
--text-tertiary: #B5AEA0;
|
||||
--text-primary: #16233C;
|
||||
--text-secondary: #5D6B82;
|
||||
--text-tertiary: #9BA8BA;
|
||||
--text-on-amber: #FFFFFF;
|
||||
|
||||
--border-subtle: rgba(0, 0, 0, 0.08);
|
||||
--border-faint: rgba(0, 0, 0, 0.06);
|
||||
--border-micro: rgba(0, 0, 0, 0.04);
|
||||
--border-dashed: rgba(0, 0, 0, 0.12);
|
||||
--border-active: rgba(0, 0, 0, 0.1);
|
||||
--divider-color: rgba(0, 0, 0, 0.06);
|
||||
--bg-subtle: rgba(0, 0, 0, 0.02);
|
||||
--bg-hover: rgba(0, 0, 0, 0.04);
|
||||
--bg-input: rgba(0, 0, 0, 0.04);
|
||||
--btn-shimmer: rgba(255, 255, 255, 0.4);
|
||||
--overlay-mask: rgba(0, 0, 0, 0.4);
|
||||
--overlay-modal: rgba(0, 0, 0, 0.5);
|
||||
--border-subtle: rgba(22, 40, 70, 0.08);
|
||||
--border-faint: rgba(22, 40, 70, 0.06);
|
||||
--border-micro: rgba(22, 40, 70, 0.04);
|
||||
--border-dashed: rgba(22, 40, 70, 0.12);
|
||||
--border-active: rgba(22, 40, 70, 0.10);
|
||||
--divider-color: rgba(22, 40, 70, 0.06);
|
||||
--bg-subtle: rgba(22, 40, 70, 0.02);
|
||||
--bg-hover: rgba(22, 40, 70, 0.04);
|
||||
--bg-input: rgba(22, 40, 70, 0.04);
|
||||
--btn-shimmer: rgba(255, 255, 255, 0.45);
|
||||
--overlay-mask: rgba(10, 20, 40, 0.4);
|
||||
--overlay-modal: rgba(10, 20, 40, 0.5);
|
||||
|
||||
--shadow-sm: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
--shadow-amber: 0 8rpx 32rpx rgba(212, 149, 48, 0.2);
|
||||
--shadow-lg: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
|
||||
--shadow-sm: 0 4rpx 16rpx rgba(30, 60, 110, 0.07);
|
||||
--shadow-md: 0 8rpx 32rpx rgba(30, 60, 110, 0.10);
|
||||
--shadow-amber: 0 8rpx 32rpx rgba(224, 155, 45, 0.22);
|
||||
--shadow-lg: 0 16rpx 48rpx rgba(30, 60, 110, 0.14);
|
||||
|
||||
--card-gradient-start: #F5F0E8;
|
||||
--card-gradient-end: #EDE8DF;
|
||||
--nav-bar-bg: #FAF7F2;
|
||||
--card-gradient-start: #F8FAFD;
|
||||
--card-gradient-end: #EFF3F9;
|
||||
--nav-bar-bg: #F2F5F9;
|
||||
--nav-bar-text: black;
|
||||
--tab-bar-bg: #FFFFFF;
|
||||
--tab-bar-color: #B5AEA0;
|
||||
--tab-bar-color: #9BA8BA;
|
||||
}
|
||||
|
||||
/* --- 色彩系统(SCSS变量桥接到CSS变量,含暗色回退值)--- */
|
||||
|
||||
Reference in New Issue
Block a user