fix: 亮色主题-加深背景层次感+加大饱和度
This commit is contained in:
Yuzhiran Dev
+48
-48
@@ -72,79 +72,79 @@ function applyTabBarTheme(theme) {
|
|||||||
默认：亮色模式（蓝紫主题） | .theme-dark：暗色模式
|
默认：亮色模式（蓝紫主题） | .theme-dark：暗色模式
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
/* ---- 亮色模式（默认：清爽中性，品牌色点缀） ---- */
|
/* ---- 亮色模式（默认：层次分明，视觉丰富） ---- */
|
||||||
page, .theme-light {
|
page, .theme-light {
|
||||||
/* 基础色 — 清爽中性 */
|
/* 基础色 — 层次感 */
|
||||||
--bg-primary: #f8f9fc;
|
--bg-primary: #edeff3;
|
||||||
--bg-secondary: #ffffff;
|
--bg-secondary: #f5f6f9;
|
||||||
--bg-tertiary: #f0f1f5;
|
--bg-tertiary: #e2e5ec;
|
||||||
|
|
||||||
/* 玻璃拟态 — 白底+阴影，不用有色玻璃 */
|
/* 卡片 — 纯白+阴影+细边框 */
|
||||||
--glass-bg: #ffffff;
|
--glass-bg: #ffffff;
|
||||||
--glass-border: rgba(0, 0, 0, 0.06);
|
--glass-border: rgba(0, 0, 0, 0.08);
|
||||||
--glass-hover: #f8f9ff;
|
--glass-hover: #f5f6ff;
|
||||||
--glass-hover-border: rgba(99, 102, 241, 0.15);
|
--glass-hover-border: rgba(99, 102, 241, 0.2);
|
||||||
--glass-strong: #ffffff;
|
--glass-strong: #ffffff;
|
||||||
--glass-dim-bg: #f0f1ff;
|
--glass-dim-bg: #eef0ff;
|
||||||
|
|
||||||
/* 文字 — 高对比 */
|
/* 文字 — 高对比 */
|
||||||
--text-primary: #0a0a1a;
|
--text-primary: #0d0d1a;
|
||||||
--text-secondary: rgba(10, 10, 26, 0.6);
|
--text-secondary: rgba(13, 13, 26, 0.65);
|
||||||
--text-tertiary: rgba(10, 10, 26, 0.4);
|
--text-tertiary: rgba(13, 13, 26, 0.45);
|
||||||
--text-muted: rgba(10, 10, 26, 0.25);
|
--text-muted: rgba(13, 13, 26, 0.28);
|
||||||
--text-disabled: rgba(10, 10, 26, 0.15);
|
--text-disabled: rgba(13, 13, 26, 0.15);
|
||||||
|
|
||||||
/* 品牌色 — Indigo */
|
/* 品牌色 — Indigo */
|
||||||
--color-brand: #6366f1;
|
--color-brand: #6366f1;
|
||||||
--color-brand-light: #818cf8;
|
--color-brand-light: #818cf8;
|
||||||
--color-brand-dark: #4f46e5;
|
--color-brand-dark: #4f46e5;
|
||||||
--color-brand-bg: rgba(99, 102, 241, 0.06);
|
--color-brand-bg: rgba(99, 102, 241, 0.08);
|
||||||
--color-brand-glow: rgba(99, 102, 241, 0.08);
|
--color-brand-glow: rgba(99, 102, 241, 0.1);
|
||||||
|
|
||||||
/* 维度色 — 保持高饱和度，在白色背景上更鲜明 */
|
/* 维度色 — 加饱和度，更鲜明 */
|
||||||
--dim1-color: #6366f1;
|
--dim1-color: #6366f1;
|
||||||
--dim1-bg: rgba(99, 102, 241, 0.06);
|
--dim1-bg: rgba(99, 102, 241, 0.08);
|
||||||
--dim1-icon-bg: rgba(99, 102, 241, 0.12);
|
--dim1-icon-bg: rgba(99, 102, 241, 0.14);
|
||||||
--dim1-border: rgba(99, 102, 241, 0.15);
|
--dim1-border: rgba(99, 102, 241, 0.18);
|
||||||
--dim1-glow: rgba(99, 102, 241, 0.04);
|
--dim1-glow: rgba(99, 102, 241, 0.05);
|
||||||
|
|
||||||
--dim2-color: #0891b2;
|
--dim2-color: #0891b2;
|
||||||
--dim2-bg: rgba(8, 145, 178, 0.06);
|
--dim2-bg: rgba(8, 145, 178, 0.08);
|
||||||
--dim2-icon-bg: rgba(8, 145, 178, 0.12);
|
--dim2-icon-bg: rgba(8, 145, 178, 0.14);
|
||||||
--dim2-border: rgba(8, 145, 178, 0.15);
|
--dim2-border: rgba(8, 145, 178, 0.18);
|
||||||
--dim2-glow: rgba(8, 145, 178, 0.04);
|
--dim2-glow: rgba(8, 145, 178, 0.05);
|
||||||
|
|
||||||
--dim3-color: #059669;
|
--dim3-color: #059669;
|
||||||
--dim3-bg: rgba(5, 150, 105, 0.06);
|
--dim3-bg: rgba(5, 150, 105, 0.08);
|
||||||
--dim3-icon-bg: rgba(5, 150, 105, 0.12);
|
--dim3-icon-bg: rgba(5, 150, 105, 0.14);
|
||||||
--dim3-border: rgba(5, 150, 105, 0.15);
|
--dim3-border: rgba(5, 150, 105, 0.18);
|
||||||
--dim3-glow: rgba(5, 150, 105, 0.04);
|
--dim3-glow: rgba(5, 150, 105, 0.05);
|
||||||
|
|
||||||
--dim4-color: #d97706;
|
--dim4-color: #d97706;
|
||||||
--dim4-bg: rgba(217, 119, 6, 0.06);
|
--dim4-bg: rgba(217, 119, 6, 0.08);
|
||||||
--dim4-icon-bg: rgba(217, 119, 6, 0.12);
|
--dim4-icon-bg: rgba(217, 119, 6, 0.14);
|
||||||
--dim4-border: rgba(217, 119, 6, 0.15);
|
--dim4-border: rgba(217, 119, 6, 0.18);
|
||||||
--dim4-glow: rgba(217, 119, 6, 0.04);
|
--dim4-glow: rgba(217, 119, 6, 0.05);
|
||||||
|
|
||||||
--dim5-color: #dc2626;
|
--dim5-color: #dc2626;
|
||||||
--dim5-bg: rgba(220, 38, 38, 0.06);
|
--dim5-bg: rgba(220, 38, 38, 0.08);
|
||||||
--dim5-icon-bg: rgba(220, 38, 38, 0.12);
|
--dim5-icon-bg: rgba(220, 38, 38, 0.14);
|
||||||
--dim5-border: rgba(220, 38, 38, 0.15);
|
--dim5-border: rgba(220, 38, 38, 0.18);
|
||||||
--dim5-glow: rgba(220, 38, 38, 0.04);
|
--dim5-glow: rgba(220, 38, 38, 0.05);
|
||||||
|
|
||||||
/* 功能色 */
|
/* 功能色 */
|
||||||
--color-free: #059669;
|
--color-free: #059669;
|
||||||
--color-free-bg: rgba(5, 150, 105, 0.08);
|
--color-free-bg: rgba(5, 150, 105, 0.1);
|
||||||
--color-pro: #d97706;
|
--color-pro: #d97706;
|
||||||
--color-pro-bg: rgba(217, 119, 6, 0.08);
|
--color-pro-bg: rgba(217, 119, 6, 0.1);
|
||||||
--color-vip: #dc2626;
|
--color-vip: #dc2626;
|
||||||
--color-vip-bg: rgba(220, 38, 38, 0.08);
|
--color-vip-bg: rgba(220, 38, 38, 0.1);
|
||||||
--color-hot: #dc2626;
|
--color-hot: #dc2626;
|
||||||
--color-hot-bg: rgba(220, 38, 38, 0.1);
|
--color-hot-bg: rgba(220, 38, 38, 0.12);
|
||||||
--color-new: #0891b2;
|
--color-new: #0891b2;
|
||||||
--color-new-bg: rgba(8, 145, 178, 0.1);
|
--color-new-bg: rgba(8, 145, 178, 0.12);
|
||||||
--color-pick: #6366f1;
|
--color-pick: #6366f1;
|
||||||
--color-pick-bg: rgba(99, 102, 241, 0.1);
|
--color-pick-bg: rgba(99, 102, 241, 0.12);
|
||||||
|
|
||||||
/* 圆角/间距/过渡 */
|
/* 圆角/间距/过渡 */
|
||||||
--radius-sm: 8px;
|
--radius-sm: 8px;
|
||||||
@@ -161,12 +161,12 @@ page, .theme-light {
|
|||||||
--blur-bg: 20px;
|
--blur-bg: 20px;
|
||||||
--transition-fast: 0.2s ease;
|
--transition-fast: 0.2s ease;
|
||||||
--transition-normal: 0.3s ease;
|
--transition-normal: 0.3s ease;
|
||||||
--glow-brand: 0 0 20px rgba(99, 102, 241, 0.06);
|
--glow-brand: 0 0 20px rgba(99, 102, 241, 0.08);
|
||||||
--glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.1);
|
--glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.12);
|
||||||
|
|
||||||
/* 亮色专属：卡片阴影 */
|
/* 亮色专属：卡片阴影 */
|
||||||
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
|
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||||
--card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
|
--card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- 暗色模式 ---- */
|
/* ---- 暗色模式 ---- */
|
||||||
|
|||||||
@@ -20,16 +20,16 @@
|
|||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
"navigationBarTitleText": "宇之然AI维度",
|
"navigationBarTitleText": "宇之然AI维度",
|
||||||
"navigationBarBackgroundColor": "#f8f9fc",
|
"navigationBarBackgroundColor": "#edeff3",
|
||||||
"backgroundColor": "#f8f9fc",
|
"backgroundColor": "#edeff3",
|
||||||
"backgroundColorTop": "#f8f9fc",
|
"backgroundColorTop": "#edeff3",
|
||||||
"backgroundColorBottom": "#f8f9fc",
|
"backgroundColorBottom": "#edeff3",
|
||||||
"app-plus": {
|
"app-plus": {
|
||||||
"background": "#f8f9fc"
|
"background": "#edeff3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"color": "rgba(0,0,0,0.3)",
|
"color": "rgba(0,0,0,0.35)",
|
||||||
"selectedColor": "#6366f1",
|
"selectedColor": "#6366f1",
|
||||||
"backgroundColor": "#ffffff",
|
"backgroundColor": "#ffffff",
|
||||||
"borderStyle": "white",
|
"borderStyle": "white",
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
/* ---- SCSS 变量（方便组件内使用） ---- */
|
/* ---- SCSS 变量（方便组件内使用） ---- */
|
||||||
$color-brand: #6366f1;
|
$color-brand: #6366f1;
|
||||||
$color-brand-light: #818cf8;
|
$color-brand-light: #818cf8;
|
||||||
$color-bg-primary: #f8f9fc;
|
$color-bg-primary: #edeff3;
|
||||||
$color-bg-dark: #14141e;
|
$color-bg-dark: #14141e;
|
||||||
|
|
||||||
$dim1-color: #6366f1;
|
$dim1-color: #6366f1;
|
||||||
|
|||||||
Reference in New Issue
Block a user