feat: 亮色主题改为深底亮卡现代设计-参考Linear设计系统
This commit is contained in:
Yuzhiran Dev
+101
-65
@@ -54,10 +54,10 @@ function applyTabBarTheme(theme) {
|
||||
})
|
||||
} else {
|
||||
uni.setTabBarStyle({
|
||||
color: 'rgba(99,102,241,0.4)',
|
||||
selectedColor: '#6366f1',
|
||||
backgroundColor: '#f0f2f8',
|
||||
borderStyle: 'white'
|
||||
color: 'rgba(255,255,255,0.35)',
|
||||
selectedColor: '#818cf8',
|
||||
backgroundColor: '#1a1b26',
|
||||
borderStyle: 'black'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -72,79 +72,79 @@ function applyTabBarTheme(theme) {
|
||||
默认：亮色模式（蓝紫主题） | .theme-dark：暗色模式
|
||||
============================================ */
|
||||
|
||||
/* ---- 亮色模式（默认：层次分明，视觉丰富） ---- */
|
||||
/* ---- 亮色模式（默认：深底亮卡，现代感） ---- */
|
||||
page, .theme-light {
|
||||
/* 基础色 — 层次感 */
|
||||
--bg-primary: #edeff3;
|
||||
--bg-secondary: #f5f6f9;
|
||||
--bg-tertiary: #e2e5ec;
|
||||
/* 基础色 — 深灰底 */
|
||||
--bg-primary: #1a1b26;
|
||||
--bg-secondary: #1e1f2d;
|
||||
--bg-tertiary: #24253a;
|
||||
|
||||
/* 卡片 — 纯白+阴影+细边框 */
|
||||
/* 卡片 — 纯白，在深底上弹出 */
|
||||
--glass-bg: #ffffff;
|
||||
--glass-border: rgba(0, 0, 0, 0.08);
|
||||
--glass-hover: #f5f6ff;
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-hover: #f0f1ff;
|
||||
--glass-hover-border: rgba(99, 102, 241, 0.2);
|
||||
--glass-strong: #ffffff;
|
||||
--glass-dim-bg: #eef0ff;
|
||||
--glass-dim-bg: rgba(99, 102, 241, 0.06);
|
||||
|
||||
/* 文字 — 高对比 */
|
||||
--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);
|
||||
/* 文字 — 白色文本在深色底上 */
|
||||
--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);
|
||||
|
||||
/* 品牌色 — Indigo */
|
||||
/* 品牌色 — Indigo 高饱和 */
|
||||
--color-brand: #6366f1;
|
||||
--color-brand-light: #818cf8;
|
||||
--color-brand-dark: #4f46e5;
|
||||
--color-brand-bg: rgba(99, 102, 241, 0.08);
|
||||
--color-brand-glow: rgba(99, 102, 241, 0.1);
|
||||
--color-brand-bg: rgba(99, 102, 241, 0.12);
|
||||
--color-brand-glow: rgba(99, 102, 241, 0.15);
|
||||
|
||||
/* 维度色 — 加饱和度，更鲜明 */
|
||||
--dim1-color: #6366f1;
|
||||
--dim1-bg: rgba(99, 102, 241, 0.08);
|
||||
--dim1-icon-bg: rgba(99, 102, 241, 0.14);
|
||||
--dim1-border: rgba(99, 102, 241, 0.18);
|
||||
--dim1-glow: rgba(99, 102, 241, 0.05);
|
||||
/* 维度色 — 在深色底上加饱和度，更鲜艳 */
|
||||
--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);
|
||||
|
||||
--dim2-color: #0891b2;
|
||||
--dim2-bg: rgba(8, 145, 178, 0.08);
|
||||
--dim2-icon-bg: rgba(8, 145, 178, 0.14);
|
||||
--dim2-border: rgba(8, 145, 178, 0.18);
|
||||
--dim2-glow: rgba(8, 145, 178, 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);
|
||||
|
||||
--dim3-color: #059669;
|
||||
--dim3-bg: rgba(5, 150, 105, 0.08);
|
||||
--dim3-icon-bg: rgba(5, 150, 105, 0.14);
|
||||
--dim3-border: rgba(5, 150, 105, 0.18);
|
||||
--dim3-glow: rgba(5, 150, 105, 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);
|
||||
|
||||
--dim4-color: #d97706;
|
||||
--dim4-bg: rgba(217, 119, 6, 0.08);
|
||||
--dim4-icon-bg: rgba(217, 119, 6, 0.14);
|
||||
--dim4-border: rgba(217, 119, 6, 0.18);
|
||||
--dim4-glow: rgba(217, 119, 6, 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);
|
||||
|
||||
--dim5-color: #dc2626;
|
||||
--dim5-bg: rgba(220, 38, 38, 0.08);
|
||||
--dim5-icon-bg: rgba(220, 38, 38, 0.14);
|
||||
--dim5-border: rgba(220, 38, 38, 0.18);
|
||||
--dim5-glow: rgba(220, 38, 38, 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);
|
||||
|
||||
/* 功能色 */
|
||||
--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);
|
||||
--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);
|
||||
|
||||
/* 圆角/间距/过渡 */
|
||||
--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.08);
|
||||
--glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.12);
|
||||
--glow-brand: 0 0 20px rgba(99, 102, 241, 0.12);
|
||||
--glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.18);
|
||||
|
||||
/* 亮色专属：卡片阴影 */
|
||||
--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.08);
|
||||
/* 亮色专属：卡片阴影（在深色底上发光的阴影效果） */
|
||||
--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);
|
||||
}
|
||||
|
||||
/* ---- 暗色模式 ---- */
|
||||
@@ -298,4 +298,40 @@ 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>
|
||||
Reference in New Issue
Block a user