diff --git a/client/src/App.vue b/client/src/App.vue index 72f4005..9cb1a86 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -54,10 +54,10 @@ function applyTabBarTheme(theme) { }) } else { uni.setTabBarStyle({ - color: 'rgba(255,255,255,0.35)', - selectedColor: '#818cf8', - backgroundColor: '#1a1b26', - borderStyle: 'black' + color: 'rgba(0,0,0,0.3)', + selectedColor: '#6366f1', + backgroundColor: '#ffffff', + borderStyle: 'white' }) } } catch (e) { @@ -72,79 +72,79 @@ function applyTabBarTheme(theme) { 默认:亮色模式(蓝紫主题) | .theme-dark:暗色模式 ============================================ */ -/* ---- 亮色模式(默认:深底亮卡,现代感) ---- */ +/* ---- 亮色模式(默认:浅底+色彩点缀,现代丰富) ---- */ page, .theme-light { - /* 基础色 — 深灰底 */ - --bg-primary: #1a1b26; - --bg-secondary: #1e1f2d; - --bg-tertiary: #24253a; + /* 基础色 — 干净浅底 */ + --bg-primary: #f5f5f7; + --bg-secondary: #ffffff; + --bg-tertiary: #e8e8ed; - /* 卡片 — 纯白,在深底上弹出 */ + /* 卡片 — 纯白微阴影 */ --glass-bg: #ffffff; - --glass-border: rgba(255, 255, 255, 0.08); - --glass-hover: #f0f1ff; - --glass-hover-border: rgba(99, 102, 241, 0.2); + --glass-border: rgba(0, 0, 0, 0.06); + --glass-hover: #f8f8ff; + --glass-hover-border: rgba(99, 102, 241, 0.15); --glass-strong: #ffffff; - --glass-dim-bg: rgba(99, 102, 241, 0.06); + --glass-dim-bg: rgba(99, 102, 241, 0.04); - /* 文字 — 白色文本在深色底上 */ - --text-primary: rgba(255, 255, 255, 0.92); - --text-secondary: rgba(255, 255, 255, 0.65); - --text-tertiary: rgba(255, 255, 255, 0.45); - --text-muted: rgba(255, 255, 255, 0.28); - --text-disabled: rgba(255, 255, 255, 0.15); + /* 文字 — 清晰深色 */ + --text-primary: #0d0d1a; + --text-secondary: rgba(13, 13, 26, 0.6); + --text-tertiary: rgba(13, 13, 26, 0.4); + --text-muted: rgba(13, 13, 26, 0.25); + --text-disabled: rgba(13, 13, 26, 0.15); /* 品牌色 — Indigo 高饱和 */ --color-brand: #6366f1; --color-brand-light: #818cf8; --color-brand-dark: #4f46e5; - --color-brand-bg: rgba(99, 102, 241, 0.12); - --color-brand-glow: rgba(99, 102, 241, 0.15); + --color-brand-bg: rgba(99, 102, 241, 0.08); + --color-brand-glow: rgba(99, 102, 241, 0.1); - /* 维度色 — 在深色底上加饱和度,更鲜艳 */ - --dim1-color: #818cf8; - --dim1-bg: rgba(99, 102, 241, 0.15); - --dim1-icon-bg: rgba(99, 102, 241, 0.25); - --dim1-border: rgba(99, 102, 241, 0.25); - --dim1-glow: rgba(99, 102, 241, 0.08); + /* 维度色 — 高饱和度,在浅色底上鲜艳 */ + --dim1-color: #6366f1; + --dim1-bg: rgba(99, 102, 241, 0.08); + --dim1-icon-bg: rgba(99, 102, 241, 0.15); + --dim1-border: rgba(99, 102, 241, 0.18); + --dim1-glow: rgba(99, 102, 241, 0.05); - --dim2-color: #38bdf8; - --dim2-bg: rgba(56, 189, 248, 0.15); - --dim2-icon-bg: rgba(56, 189, 248, 0.25); - --dim2-border: rgba(56, 189, 248, 0.25); - --dim2-glow: rgba(56, 189, 248, 0.08); + --dim2-color: #0891b2; + --dim2-bg: rgba(8, 145, 178, 0.08); + --dim2-icon-bg: rgba(8, 145, 178, 0.15); + --dim2-border: rgba(8, 145, 178, 0.18); + --dim2-glow: rgba(8, 145, 178, 0.05); - --dim3-color: #34d399; - --dim3-bg: rgba(52, 211, 153, 0.15); - --dim3-icon-bg: rgba(52, 211, 153, 0.25); - --dim3-border: rgba(52, 211, 153, 0.25); - --dim3-glow: rgba(52, 211, 153, 0.08); + --dim3-color: #059669; + --dim3-bg: rgba(5, 150, 105, 0.08); + --dim3-icon-bg: rgba(5, 150, 105, 0.15); + --dim3-border: rgba(5, 150, 105, 0.18); + --dim3-glow: rgba(5, 150, 105, 0.05); - --dim4-color: #fbbf24; - --dim4-bg: rgba(251, 191, 36, 0.15); - --dim4-icon-bg: rgba(251, 191, 36, 0.25); - --dim4-border: rgba(251, 191, 36, 0.25); - --dim4-glow: rgba(251, 191, 36, 0.08); + --dim4-color: #d97706; + --dim4-bg: rgba(217, 119, 6, 0.08); + --dim4-icon-bg: rgba(217, 119, 6, 0.15); + --dim4-border: rgba(217, 119, 6, 0.18); + --dim4-glow: rgba(217, 119, 6, 0.05); - --dim5-color: #fb7185; - --dim5-bg: rgba(251, 113, 133, 0.15); - --dim5-icon-bg: rgba(251, 113, 133, 0.25); - --dim5-border: rgba(251, 113, 133, 0.25); - --dim5-glow: rgba(251, 113, 133, 0.08); + --dim5-color: #dc2626; + --dim5-bg: rgba(220, 38, 38, 0.08); + --dim5-icon-bg: rgba(220, 38, 38, 0.15); + --dim5-border: rgba(220, 38, 38, 0.18); + --dim5-glow: rgba(220, 38, 38, 0.05); /* 功能色 */ - --color-free: #34d399; - --color-free-bg: rgba(52, 211, 153, 0.12); - --color-pro: #fbbf24; - --color-pro-bg: rgba(251, 191, 36, 0.12); - --color-vip: #fb7185; - --color-vip-bg: rgba(251, 113, 133, 0.12); - --color-hot: #fb7185; - --color-hot-bg: rgba(251, 113, 133, 0.15); - --color-new: #38bdf8; - --color-new-bg: rgba(56, 189, 248, 0.15); - --color-pick: #818cf8; - --color-pick-bg: rgba(99, 102, 241, 0.15); + --color-free: #059669; + --color-free-bg: rgba(5, 150, 105, 0.1); + --color-pro: #d97706; + --color-pro-bg: rgba(217, 119, 6, 0.1); + --color-vip: #dc2626; + --color-vip-bg: rgba(220, 38, 38, 0.1); + --color-hot: #dc2626; + --color-hot-bg: rgba(220, 38, 38, 0.12); + --color-new: #0891b2; + --color-new-bg: rgba(8, 145, 178, 0.12); + --color-pick: #6366f1; + --color-pick-bg: rgba(99, 102, 241, 0.12); /* 圆角/间距/过渡 */ --radius-sm: 8px; @@ -161,12 +161,12 @@ page, .theme-light { --blur-bg: 20px; --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; - --glow-brand: 0 0 20px rgba(99, 102, 241, 0.12); - --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.18); + --glow-brand: 0 0 20px rgba(99, 102, 241, 0.08); + --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.12); - /* 亮色专属:卡片阴影(在深色底上发光的阴影效果) */ - --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15); - --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.3); + /* 亮色专属:卡片阴影 */ + --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); + --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); } /* ---- 暗色模式 ---- */ @@ -298,40 +298,4 @@ view { -webkit-text-fill-color: transparent; background-clip: text; } - -/* 卡片内文字:白色卡片上文字应为深色 */ -.glass-text { - --text-primary: #0d0d1a; - --text-secondary: rgba(13, 13, 26, 0.65); - --text-tertiary: rgba(13, 13, 26, 0.45); - --text-muted: rgba(13, 13, 26, 0.28); - --text-disabled: rgba(13, 13, 26, 0.15); -} - -/* 所有卡片/列表/输入框等白底元素的文字自动变深色 */ -.card, -.search-bar, -[class$="-card"], -[class$="-item"], -[class$="-input"], -[class*="Form-input"], -[class*="form-"], -.welcome-card, -.msg-list, -.chat-input, -.bubble, -.quota-badge, -.filter-item, -.menu-item, -.news-card, -.dim-tag, -.card-tag, -[class*="-badge"] { - --text-primary: #0d0d1a; - --text-secondary: rgba(13, 13, 26, 0.65); - --text-tertiary: rgba(13, 13, 26, 0.45); - --text-muted: rgba(13, 13, 26, 0.28); - --text-disabled: rgba(13, 13, 26, 0.15); - --glass-text-primary: #0d0d1a; -} \ No newline at end of file diff --git a/client/src/pages.json b/client/src/pages.json index 2f5bd7a..0121035 100644 --- a/client/src/pages.json +++ b/client/src/pages.json @@ -18,20 +18,20 @@ {"path": "pages/profile/profile", "style": {"navigationBarTitleText": "我的", "navigationStyle": "custom"}} ], "globalStyle": { - "navigationBarTextStyle": "white", + "navigationBarTextStyle": "black", "navigationBarTitleText": "宇之然AI维度", - "navigationBarBackgroundColor": "#1a1b26", - "backgroundColor": "#1a1b26", - "backgroundColorTop": "#1a1b26", - "backgroundColorBottom": "#1a1b26", + "navigationBarBackgroundColor": "#f5f5f7", + "backgroundColor": "#f5f5f7", + "backgroundColorTop": "#f5f5f7", + "backgroundColorBottom": "#f5f5f7", "app-plus": { - "background": "#1a1b26" + "background": "#f5f5f7" } }, "tabBar": { - "color": "rgba(255,255,255,0.35)", - "selectedColor": "#818cf8", - "backgroundColor": "#1a1b26", + "color": "rgba(0,0,0,0.3)", + "selectedColor": "#6366f1", + "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ {"pagePath": "pages/index/index", "text": "探索"}, diff --git a/client/src/styles/theme.scss b/client/src/styles/theme.scss index 6f126a9..0463c70 100644 --- a/client/src/styles/theme.scss +++ b/client/src/styles/theme.scss @@ -12,8 +12,8 @@ /* ---- SCSS 变量(方便组件内使用) ---- */ $color-brand: #6366f1; $color-brand-light: #818cf8; -$color-bg-primary: #1a1b26; -$color-bg-dark: #0d0d15; +$color-bg-primary: #f5f5f7; +$color-bg-dark: #14141e; $dim1-color: #6366f1; $dim2-color: #0891b2;