fix: 亮色主题彻底重做-清爽白底+品牌色点缀+卡片阴影
This commit is contained in:
Yuzhiran Dev
+55
-50
@@ -72,79 +72,79 @@ function applyTabBarTheme(theme) {
|
||||
默认：亮色模式（蓝紫主题） | .theme-dark：暗色模式
|
||||
============================================ */
|
||||
|
||||
/* ---- 亮色模式（默认：蓝紫科技主题） ---- */
|
||||
/* ---- 亮色模式（默认：清爽中性，品牌色点缀） ---- */
|
||||
page, .theme-light {
|
||||
/* 基础色 — 蓝紫科技灰 */
|
||||
--bg-primary: #e8ecf8;
|
||||
--bg-secondary: #eef1fa;
|
||||
--bg-tertiary: #dee3f2;
|
||||
/* 基础色 — 清爽中性 */
|
||||
--bg-primary: #f8f9fc;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #f0f1f5;
|
||||
|
||||
/* 玻璃拟态 — 蓝紫玻璃 */
|
||||
--glass-bg: rgba(99, 102, 241, 0.08);
|
||||
--glass-border: rgba(99, 102, 241, 0.12);
|
||||
--glass-hover: rgba(99, 102, 241, 0.12);
|
||||
--glass-hover-border: rgba(99, 102, 241, 0.18);
|
||||
--glass-strong: rgba(99, 102, 241, 0.1);
|
||||
--glass-dim-bg: rgba(99, 102, 241, 0.04);
|
||||
/* 玻璃拟态 — 白底+阴影，不用有色玻璃 */
|
||||
--glass-bg: #ffffff;
|
||||
--glass-border: rgba(0, 0, 0, 0.06);
|
||||
--glass-hover: #f8f9ff;
|
||||
--glass-hover-border: rgba(99, 102, 241, 0.15);
|
||||
--glass-strong: #ffffff;
|
||||
--glass-dim-bg: #f0f1ff;
|
||||
|
||||
/* 文字 — 深色高对比 */
|
||||
--text-primary: #0f0f23;
|
||||
--text-secondary: rgba(15, 15, 35, 0.7);
|
||||
--text-tertiary: rgba(15, 15, 35, 0.5);
|
||||
--text-muted: rgba(15, 15, 35, 0.32);
|
||||
--text-disabled: rgba(15, 15, 35, 0.2);
|
||||
/* 文字 — 高对比 */
|
||||
--text-primary: #0a0a1a;
|
||||
--text-secondary: rgba(10, 10, 26, 0.6);
|
||||
--text-tertiary: rgba(10, 10, 26, 0.4);
|
||||
--text-muted: rgba(10, 10, 26, 0.25);
|
||||
--text-disabled: rgba(10, 10, 26, 0.15);
|
||||
|
||||
/* 品牌色 — 蓝紫 */
|
||||
/* 品牌色 — Indigo */
|
||||
--color-brand: #6366f1;
|
||||
--color-brand-light: #818cf8;
|
||||
--color-brand-dark: #4f46e5;
|
||||
--color-brand-bg: rgba(99, 102, 241, 0.1);
|
||||
--color-brand-glow: rgba(99, 102, 241, 0.12);
|
||||
--color-brand-bg: rgba(99, 102, 241, 0.06);
|
||||
--color-brand-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.14);
|
||||
--dim1-border: rgba(99, 102, 241, 0.16);
|
||||
--dim1-glow: rgba(99, 102, 241, 0.05);
|
||||
--dim1-bg: rgba(99, 102, 241, 0.06);
|
||||
--dim1-icon-bg: rgba(99, 102, 241, 0.12);
|
||||
--dim1-border: rgba(99, 102, 241, 0.15);
|
||||
--dim1-glow: rgba(99, 102, 241, 0.04);
|
||||
|
||||
--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.16);
|
||||
--dim2-glow: rgba(8, 145, 178, 0.05);
|
||||
--dim2-bg: rgba(8, 145, 178, 0.06);
|
||||
--dim2-icon-bg: rgba(8, 145, 178, 0.12);
|
||||
--dim2-border: rgba(8, 145, 178, 0.15);
|
||||
--dim2-glow: rgba(8, 145, 178, 0.04);
|
||||
|
||||
--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.16);
|
||||
--dim3-glow: rgba(5, 150, 105, 0.05);
|
||||
--dim3-bg: rgba(5, 150, 105, 0.06);
|
||||
--dim3-icon-bg: rgba(5, 150, 105, 0.12);
|
||||
--dim3-border: rgba(5, 150, 105, 0.15);
|
||||
--dim3-glow: rgba(5, 150, 105, 0.04);
|
||||
|
||||
--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.16);
|
||||
--dim4-glow: rgba(217, 119, 6, 0.05);
|
||||
--dim4-bg: rgba(217, 119, 6, 0.06);
|
||||
--dim4-icon-bg: rgba(217, 119, 6, 0.12);
|
||||
--dim4-border: rgba(217, 119, 6, 0.15);
|
||||
--dim4-glow: rgba(217, 119, 6, 0.04);
|
||||
|
||||
--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.16);
|
||||
--dim5-glow: rgba(220, 38, 38, 0.05);
|
||||
--dim5-bg: rgba(220, 38, 38, 0.06);
|
||||
--dim5-icon-bg: rgba(220, 38, 38, 0.12);
|
||||
--dim5-border: rgba(220, 38, 38, 0.15);
|
||||
--dim5-glow: rgba(220, 38, 38, 0.04);
|
||||
|
||||
/* 功能色 */
|
||||
--color-free: #059669;
|
||||
--color-free-bg: rgba(5, 150, 105, 0.1);
|
||||
--color-free-bg: rgba(5, 150, 105, 0.08);
|
||||
--color-pro: #d97706;
|
||||
--color-pro-bg: rgba(217, 119, 6, 0.1);
|
||||
--color-pro-bg: rgba(217, 119, 6, 0.08);
|
||||
--color-vip: #dc2626;
|
||||
--color-vip-bg: rgba(220, 38, 38, 0.1);
|
||||
--color-vip-bg: rgba(220, 38, 38, 0.08);
|
||||
--color-hot: #dc2626;
|
||||
--color-hot-bg: rgba(220, 38, 38, 0.12);
|
||||
--color-hot-bg: rgba(220, 38, 38, 0.1);
|
||||
--color-new: #0891b2;
|
||||
--color-new-bg: rgba(8, 145, 178, 0.12);
|
||||
--color-new-bg: rgba(8, 145, 178, 0.1);
|
||||
--color-pick: #6366f1;
|
||||
--color-pick-bg: rgba(99, 102, 241, 0.12);
|
||||
--color-pick-bg: rgba(99, 102, 241, 0.1);
|
||||
|
||||
/* 圆角/间距/过渡 */
|
||||
--radius-sm: 8px;
|
||||
@@ -161,8 +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.06);
|
||||
--glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.1);
|
||||
|
||||
/* 亮色专属：卡片阴影 */
|
||||
--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.06);
|
||||
}
|
||||
|
||||
/* ---- 暗色模式 ---- */
|
||||
@@ -280,6 +284,7 @@ view {
|
||||
border-radius: var(--radius-lg);
|
||||
backdrop-filter: blur(var(--blur-bg));
|
||||
-webkit-backdrop-filter: blur(var(--blur-bg));
|
||||
box-shadow: var(--card-shadow, none);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user