cg/hejiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(theme): 更新白天主题配色方案为清透玻璃感设计

Browse Source 
- 调整白天主题基础背景色从 #FAF7F2 到 #F2F5F9
- 更新卡片、提升层和替代卡片背景色以匹配新主题
- 修改琥珀色系颜色值并调整透明度效果
- 更新珊瑚色、薄荷绿和薰衣草色的视觉表现
- 调整主次文字颜色以提高可读性
- 更新边框、分割线和阴影的颜色及透明度
- 优化导航栏和标签栏的配色方案
- 调整渐变卡片背景色以配合新主题风格
This commit is contained in:
cg
2026-07-21 07:13:28 +08:00
parent 506f6d2e4e
commit 0332aabba0
3 changed files with 48 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+1 -1
View File
@@ -28,7 +28,7 @@ export default {
const theme = getCurrentTheme() const theme = getCurrentTheme()
applyTheme(theme) applyTheme(theme)
// 同步设置page元素背景色 // 同步设置page元素背景色
const bgColor = theme === 'light' ? '#FAF7F2' : '#0B0B14' const bgColor = theme === 'light' ? '#F2F5F9' : '#0B0B14'
try { try {
uni.setBackgroundColor({ uni.setBackgroundColor({
backgroundColor: bgColor, backgroundColor: bgColor,
common/utils.js
+13 -13
View File
@@ -226,7 +226,7 @@ export function applyTheme(theme) {
export function applyNavBarTheme(theme) { export function applyNavBarTheme(theme) {
const colors = { const colors = {
dark: { backgroundColor: '#0B0B14', frontColor: '#ffffff' }, dark: { backgroundColor: '#0B0B14', frontColor: '#ffffff' },
light: { backgroundColor: '#FAF7F2', frontColor: '#000000' } light: { backgroundColor: '#F2F5F9', frontColor: '#000000' }
} }
const c = colors[theme] || colors.dark const c = colors[theme] || colors.dark
try { try {
@@ -254,8 +254,8 @@ export function applyTabBarTheme(theme) {
borderStyle: 'black' borderStyle: 'black'
}, },
light: { light: {
color: '#B5AEA0', color: '#9BA8BA',
selectedColor: '#D49530', selectedColor: '#E09B2D',
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
borderStyle: 'white' borderStyle: 'white'
} }
@@ -274,17 +274,17 @@ export function applyTabBarTheme(theme) {
export function getThemeColors(theme) { export function getThemeColors(theme) {
const isDark = theme !== 'light' const isDark = theme !== 'light'
return { return {
textPrimary: isDark ? '#FFFFFF' : '#2C2416', textPrimary: isDark ? '#FFFFFF' : '#16233C',
textSecondary: isDark ? '#C0C0D2' : '#8C8474', textSecondary: isDark ? '#C0C0D2' : '#5D6B82',
textTertiary: isDark ? '#9494AC' : '#B5AEA0', textTertiary: isDark ? '#9494AC' : '#9BA8BA',
amber: isDark ? '#E8A838' : '#D49530', amber: isDark ? '#E8A838' : '#E09B2D',
bgBase: isDark ? '#0B0B14' : '#FAF7F2', bgBase: isDark ? '#0B0B14' : '#F2F5F9',
bgCard: isDark ? '#1A1A28' : '#FFFFFF', bgCard: isDark ? '#1A1A28' : '#FFFFFF',
cardGradStart: isDark ? '#1A1510' : '#F5F0E8', cardGradStart: isDark ? '#1A1510' : '#F8FAFD',
cardGradEnd: isDark ? '#0D0B08' : '#EDE8DF', cardGradEnd: isDark ? '#0D0B08' : '#EFF3F9',
borderSubtle: isDark ? 'rgba(232,168,56,0.15)' : 'rgba(212,149,48,0.2)', borderSubtle: isDark ? 'rgba(232,168,56,0.15)' : 'rgba(224,155,45,0.18)',
bgPlaceholder: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.04)', bgPlaceholder: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(22,40,70,0.04)',
emojiBg: isDark ? 'rgba(232,168,56,0.08)' : 'rgba(212,149,48,0.1)' emojiBg: isDark ? 'rgba(232,168,56,0.08)' : 'rgba(224,155,45,0.10)'
} }
} }
uni.scss
+34 -34
View File
@@ -51,51 +51,51 @@ page, .theme-dark {
--tab-bar-color: #9494AC; --tab-bar-color: #9494AC;
} }
/* --- 白天主题 --- */ /* --- 白天主题（清透玻璃感 Crystal Day）--- */
.theme-light { .theme-light {
--bg-base: #FAF7F2; --bg-base: #F2F5F9;
--bg-card: #FFFFFF; --bg-card: #FFFFFF;
--bg-card-alt: #F0EDE6; --bg-card-alt: #EEF2F7;
--bg-elevated: #EAE5DA; --bg-elevated: #E4EAF2;
--amber: #D49530; --amber: #E09B2D;
--amber-light: #E8A838; --amber-light: #F2B84B;
--amber-deep: #B87A1A; --amber-deep: #C67F15;
--amber-glow: rgba(212, 149, 48, 0.12); --amber-glow: rgba(224, 155, 45, 0.10);
--coral: #E85555; --coral: #F0655A;
--mint: #4AAF8A; --mint: #34B88C;
--lavender: #7A7598; --lavender: #7C82A8;
--text-primary: #2C2416; --text-primary: #16233C;
--text-secondary: #8C8474; --text-secondary: #5D6B82;
--text-tertiary: #B5AEA0; --text-tertiary: #9BA8BA;
--text-on-amber: #FFFFFF; --text-on-amber: #FFFFFF;
--border-subtle: rgba(0, 0, 0, 0.08); --border-subtle: rgba(22, 40, 70, 0.08);
--border-faint: rgba(0, 0, 0, 0.06); --border-faint: rgba(22, 40, 70, 0.06);
--border-micro: rgba(0, 0, 0, 0.04); --border-micro: rgba(22, 40, 70, 0.04);
--border-dashed: rgba(0, 0, 0, 0.12); --border-dashed: rgba(22, 40, 70, 0.12);
--border-active: rgba(0, 0, 0, 0.1); --border-active: rgba(22, 40, 70, 0.10);
--divider-color: rgba(0, 0, 0, 0.06); --divider-color: rgba(22, 40, 70, 0.06);
--bg-subtle: rgba(0, 0, 0, 0.02); --bg-subtle: rgba(22, 40, 70, 0.02);
--bg-hover: rgba(0, 0, 0, 0.04); --bg-hover: rgba(22, 40, 70, 0.04);
--bg-input: rgba(0, 0, 0, 0.04); --bg-input: rgba(22, 40, 70, 0.04);
--btn-shimmer: rgba(255, 255, 255, 0.4); --btn-shimmer: rgba(255, 255, 255, 0.45);
--overlay-mask: rgba(0, 0, 0, 0.4); --overlay-mask: rgba(10, 20, 40, 0.4);
--overlay-modal: rgba(0, 0, 0, 0.5); --overlay-modal: rgba(10, 20, 40, 0.5);
--shadow-sm: 0 4rpx 12rpx rgba(0, 0, 0, 0.06); --shadow-sm: 0 4rpx 16rpx rgba(30, 60, 110, 0.07);
--shadow-md: 0 8rpx 32rpx rgba(0, 0, 0, 0.08); --shadow-md: 0 8rpx 32rpx rgba(30, 60, 110, 0.10);
--shadow-amber: 0 8rpx 32rpx rgba(212, 149, 48, 0.2); --shadow-amber: 0 8rpx 32rpx rgba(224, 155, 45, 0.22);
--shadow-lg: 0 16rpx 48rpx rgba(0, 0, 0, 0.12); --shadow-lg: 0 16rpx 48rpx rgba(30, 60, 110, 0.14);
--card-gradient-start: #F5F0E8; --card-gradient-start: #F8FAFD;
--card-gradient-end: #EDE8DF; --card-gradient-end: #EFF3F9;
--nav-bar-bg: #FAF7F2; --nav-bar-bg: #F2F5F9;
--nav-bar-text: black; --nav-bar-text: black;
--tab-bar-bg: #FFFFFF; --tab-bar-bg: #FFFFFF;
--tab-bar-color: #B5AEA0; --tab-bar-color: #9BA8BA;
} }
/* --- 色彩系统（SCSS变量桥接到CSS变量，含暗色回退值）--- */ /* --- 色彩系统（SCSS变量桥接到CSS变量，含暗色回退值）--- */