feat(theme): 实现日夜主题自动切换功能
- 添加日夜主题CSS变量定义，支持琥珀夜光和暖白琥珀两种风格 - 实现主题切换逻辑，根据时间自动切换白天(light)和夜间(dark)主题 - 在App.vue中集成主题初始化和token恢复功能 - 更新全局样式类应用主题颜色变量，包括卡片、文本、边框等 - 创建主题混入(mixin)供各页面使用，确保主题同步更新 - 实现导航栏和TabBar主题动态切换，提升用户体验 - 添加API服务层封装HaveADrink SDK，统一处理认证和请求 - 优化DrinkCard组件显示饮酒感受信息，丰富打卡记录展示 - 更新项目依赖配置，集成新的API客户端库
This commit is contained in:
@@ -1,27 +1,122 @@
|
||||
/* ==========================================
|
||||
* 喝了么 - 设计令牌 (Design Tokens)
|
||||
* 设计概念: 琥珀夜光 Amber Night
|
||||
* 设计概念: 琥珀夜光 Amber Night / 暖白琥珀 Warm Day
|
||||
* 支持日夜主题自动切换
|
||||
* ========================================== */
|
||||
|
||||
/* --- 色彩系统 --- */
|
||||
$bg-base: #0B0B14; // 深夜底色
|
||||
$bg-card: #151520; // 卡片底色
|
||||
$bg-card-alt: #1C1C2A; // 卡片悬浮/选中态
|
||||
$bg-elevated: #222234; // 弹出层/输入框底色
|
||||
/* --- 夜间主题（默认）--- */
|
||||
page, .theme-dark {
|
||||
--bg-base: #0B0B14;
|
||||
--bg-card: #1A1A28;
|
||||
--bg-card-alt: #222236;
|
||||
--bg-elevated: #28283E;
|
||||
|
||||
$amber: #E8A838; // 琥珀金 - 品牌主色
|
||||
$amber-light: #F5C563; // 浅金 - 高亮/数字
|
||||
$amber-deep: #C47F17; // 深琥珀 - 按压态
|
||||
$amber-glow: rgba(232, 168, 56, 0.15); // 琥珀光晕
|
||||
--amber: #E8A838;
|
||||
--amber-light: #F5C563;
|
||||
--amber-deep: #C47F17;
|
||||
--amber-glow: rgba(232, 168, 56, 0.15);
|
||||
|
||||
$coral: #FF6B6B; // 珊瑚红 - 警告/健康提醒
|
||||
$mint: #5EC6A0; // 薄荷绿 - 成功/正面
|
||||
$lavender: #8B85B8; // 淡紫灰 - 次要文本
|
||||
--coral: #FF6B6B;
|
||||
--mint: #5EC6A0;
|
||||
--lavender: #8B85B8;
|
||||
|
||||
$text-primary: #FFFFFF; // 主文本
|
||||
$text-secondary: #7E7E96; // 次要文本
|
||||
$text-tertiary: #4A4A62; // 辅助文本
|
||||
$text-on-amber: #0B0B14; // 琥珀色上的文字
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #C0C0D2;
|
||||
--text-tertiary: #9494AC;
|
||||
--text-on-amber: #0B0B14;
|
||||
|
||||
--border-subtle: rgba(255, 255, 255, 0.10);
|
||||
--border-faint: rgba(255, 255, 255, 0.08);
|
||||
--border-micro: rgba(255, 255, 255, 0.05);
|
||||
--border-dashed: rgba(255, 255, 255, 0.12);
|
||||
--border-active: rgba(255, 255, 255, 0.12);
|
||||
--divider-color: rgba(255, 255, 255, 0.08);
|
||||
--bg-subtle: rgba(255, 255, 255, 0.03);
|
||||
--bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--bg-input: rgba(255, 255, 255, 0.08);
|
||||
--btn-shimmer: rgba(255, 255, 255, 0.15);
|
||||
--overlay-mask: rgba(0, 0, 0, 0.6);
|
||||
--overlay-modal: rgba(0, 0, 0, 0.7);
|
||||
|
||||
--shadow-sm: 0 4rpx 12rpx rgba(0, 0, 0, 0.25);
|
||||
--shadow-md: 0 8rpx 32rpx rgba(0, 0, 0, 0.35);
|
||||
--shadow-amber: 0 8rpx 32rpx rgba(232, 168, 56, 0.25);
|
||||
--shadow-lg: 0 16rpx 48rpx rgba(0, 0, 0, 0.45);
|
||||
|
||||
--card-gradient-start: #1A1510;
|
||||
--card-gradient-end: #0D0B08;
|
||||
--nav-bar-bg: #0B0B14;
|
||||
--nav-bar-text: white;
|
||||
--tab-bar-bg: #151520;
|
||||
--tab-bar-color: #9494AC;
|
||||
}
|
||||
|
||||
/* --- 白天主题 --- */
|
||||
.theme-light {
|
||||
--bg-base: #FAF7F2;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-card-alt: #F0EDE6;
|
||||
--bg-elevated: #EAE5DA;
|
||||
|
||||
--amber: #D49530;
|
||||
--amber-light: #E8A838;
|
||||
--amber-deep: #B87A1A;
|
||||
--amber-glow: rgba(212, 149, 48, 0.12);
|
||||
|
||||
--coral: #E85555;
|
||||
--mint: #4AAF8A;
|
||||
--lavender: #7A7598;
|
||||
|
||||
--text-primary: #2C2416;
|
||||
--text-secondary: #8C8474;
|
||||
--text-tertiary: #B5AEA0;
|
||||
--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);
|
||||
|
||||
--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);
|
||||
|
||||
--card-gradient-start: #F5F0E8;
|
||||
--card-gradient-end: #EDE8DF;
|
||||
--nav-bar-bg: #FAF7F2;
|
||||
--nav-bar-text: black;
|
||||
--tab-bar-bg: #FFFFFF;
|
||||
--tab-bar-color: #B5AEA0;
|
||||
}
|
||||
|
||||
/* --- 色彩系统（SCSS变量桥接到CSS变量，含暗色回退值）--- */
|
||||
$bg-base: var(--bg-base, #0B0B14);
|
||||
$bg-card: var(--bg-card, #1A1A28);
|
||||
$bg-card-alt: var(--bg-card-alt, #222236);
|
||||
$bg-elevated: var(--bg-elevated, #28283E);
|
||||
|
||||
$amber: var(--amber, #E8A838);
|
||||
$amber-light: var(--amber-light, #F5C563);
|
||||
$amber-deep: var(--amber-deep, #C47F17);
|
||||
$amber-glow: var(--amber-glow, rgba(232, 168, 56, 0.15));
|
||||
|
||||
$coral: var(--coral, #FF6B6B);
|
||||
$mint: var(--mint, #5EC6A0);
|
||||
$lavender: var(--lavender, #8B85B8);
|
||||
|
||||
$text-primary: var(--text-primary, #FFFFFF);
|
||||
$text-secondary: var(--text-secondary, #C0C0D2);
|
||||
$text-tertiary: var(--text-tertiary, #9494AC);
|
||||
$text-on-amber: var(--text-on-amber, #0B0B14);
|
||||
|
||||
/* --- 字体 --- */
|
||||
$font-base: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
|
||||
@@ -62,11 +157,11 @@ $radius-lg: 28rpx;
|
||||
$radius-xl: 40rpx;
|
||||
$radius-full: 999rpx;
|
||||
|
||||
/* --- 阴影 --- */
|
||||
$shadow-sm: 0 4rpx 12rpx rgba(0, 0, 0, 0.25);
|
||||
$shadow-md: 0 8rpx 32rpx rgba(0, 0, 0, 0.35);
|
||||
$shadow-amber: 0 8rpx 32rpx rgba(232, 168, 56, 0.25);
|
||||
$shadow-lg: 0 16rpx 48rpx rgba(0, 0, 0, 0.45);
|
||||
/* --- 阴影（SCSS变量桥接到CSS变量，含暗色回退值）--- */
|
||||
$shadow-sm: var(--shadow-sm, 0 4rpx 12rpx rgba(0, 0, 0, 0.25));
|
||||
$shadow-md: var(--shadow-md, 0 8rpx 32rpx rgba(0, 0, 0, 0.35));
|
||||
$shadow-amber: var(--shadow-amber, 0 8rpx 32rpx rgba(232, 168, 56, 0.25));
|
||||
$shadow-lg: var(--shadow-lg, 0 16rpx 48rpx rgba(0, 0, 0, 0.45));
|
||||
|
||||
/* --- 动画 --- */
|
||||
$ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
|
||||
Reference in New Issue
Block a user