From 0332aabba0070458d524396e6ba66437633369ad Mon Sep 17 00:00:00 2001 From: cheng <545895878@qq.com> Date: Tue, 21 Jul 2026 07:13:28 +0800 Subject: [PATCH] =?UTF-8?q?style(theme):=20=E6=9B=B4=E6=96=B0=E7=99=BD?= =?UTF-8?q?=E5=A4=A9=E4=B8=BB=E9=A2=98=E9=85=8D=E8=89=B2=E6=96=B9=E6=A1=88?= =?UTF-8?q?=E4=B8=BA=E6=B8=85=E9=80=8F=E7=8E=BB=E7=92=83=E6=84=9F=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整白天主题基础背景色从 #FAF7F2 到 #F2F5F9 - 更新卡片、提升层和替代卡片背景色以匹配新主题 - 修改琥珀色系颜色值并调整透明度效果 - 更新珊瑚色、薄荷绿和薰衣草色的视觉表现 - 调整主次文字颜色以提高可读性 - 更新边框、分割线和阴影的颜色及透明度 - 优化导航栏和标签栏的配色方案 - 调整渐变卡片背景色以配合新主题风格 --- App.vue | 2 +- common/utils.js | 26 +++++++++---------- uni.scss | 68 ++++++++++++++++++++++++------------------------- 3 files changed, 48 insertions(+), 48 deletions(-) diff --git a/App.vue b/App.vue index bdc5d19..e7af936 100644 --- a/App.vue +++ b/App.vue @@ -28,7 +28,7 @@ export default { const theme = getCurrentTheme() applyTheme(theme) // 同步设置page元素背景色 - const bgColor = theme === 'light' ? '#FAF7F2' : '#0B0B14' + const bgColor = theme === 'light' ? '#F2F5F9' : '#0B0B14' try { uni.setBackgroundColor({ backgroundColor: bgColor, diff --git a/common/utils.js b/common/utils.js index 964c2d1..71536f6 100644 --- a/common/utils.js +++ b/common/utils.js @@ -226,7 +226,7 @@ export function applyTheme(theme) { export function applyNavBarTheme(theme) { const colors = { dark: { backgroundColor: '#0B0B14', frontColor: '#ffffff' }, - light: { backgroundColor: '#FAF7F2', frontColor: '#000000' } + light: { backgroundColor: '#F2F5F9', frontColor: '#000000' } } const c = colors[theme] || colors.dark try { @@ -254,8 +254,8 @@ export function applyTabBarTheme(theme) { borderStyle: 'black' }, light: { - color: '#B5AEA0', - selectedColor: '#D49530', + color: '#9BA8BA', + selectedColor: '#E09B2D', backgroundColor: '#FFFFFF', borderStyle: 'white' } @@ -274,17 +274,17 @@ export function applyTabBarTheme(theme) { export function getThemeColors(theme) { const isDark = theme !== 'light' return { - textPrimary: isDark ? '#FFFFFF' : '#2C2416', - textSecondary: isDark ? '#C0C0D2' : '#8C8474', - textTertiary: isDark ? '#9494AC' : '#B5AEA0', - amber: isDark ? '#E8A838' : '#D49530', - bgBase: isDark ? '#0B0B14' : '#FAF7F2', + textPrimary: isDark ? '#FFFFFF' : '#16233C', + textSecondary: isDark ? '#C0C0D2' : '#5D6B82', + textTertiary: isDark ? '#9494AC' : '#9BA8BA', + amber: isDark ? '#E8A838' : '#E09B2D', + bgBase: isDark ? '#0B0B14' : '#F2F5F9', bgCard: isDark ? '#1A1A28' : '#FFFFFF', - cardGradStart: isDark ? '#1A1510' : '#F5F0E8', - cardGradEnd: isDark ? '#0D0B08' : '#EDE8DF', - borderSubtle: isDark ? 'rgba(232,168,56,0.15)' : 'rgba(212,149,48,0.2)', - bgPlaceholder: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.04)', - emojiBg: isDark ? 'rgba(232,168,56,0.08)' : 'rgba(212,149,48,0.1)' + cardGradStart: isDark ? '#1A1510' : '#F8FAFD', + cardGradEnd: isDark ? '#0D0B08' : '#EFF3F9', + borderSubtle: isDark ? 'rgba(232,168,56,0.15)' : 'rgba(224,155,45,0.18)', + bgPlaceholder: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(22,40,70,0.04)', + emojiBg: isDark ? 'rgba(232,168,56,0.08)' : 'rgba(224,155,45,0.10)' } } diff --git a/uni.scss b/uni.scss index c62a011..eecd2b7 100644 --- a/uni.scss +++ b/uni.scss @@ -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变量，含暗色回退值）--- */