wlt/ai-dimension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 亮色主题回到浅底+色彩点缀设计

Browse Source
This commit is contained in:
Yuzhiran Dev
2026-07-11 18:38:33 +08:00
parent 6dc85281a5
commit ee34c35994
3 changed files with 76 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.vue
+65 -101
View File
@@ -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;
}
</style>
client/src/pages.json
+9 -9
View File
@@ -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": "探索"},
client/src/styles/theme.scss
+2 -2
View File
@@ -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;