六、CSS 变量系统详解
6.1 CSS 变量体系概述
WeUI 使用 CSS 自定义属性实现了完整的主题变量体系，覆盖了颜色、字体、间距、圆角、阴影等所有视觉维度。这套变量体系让开发者可以在不修改 WeUI 源码的情况下，轻松定制应用的主题风格。
变量命名规范：--weui-{category}-{name}
category：变量类别（如 COLOR、BG、FG、BORDER 等）
name：变量名称（如 BRAND、RED、GREEN 等）
6.2 完整的颜色变量
WeUI 的颜色变量分为品牌色、功能色、中性色三大类：
:root {
/* ========== 品牌色 ========== */
--weui-BRAND: #07C160; /* 品牌主色（微信绿） */
--weui-BRAND-LIGHT: #E6F9EF; /* 品牌色浅色背景 */
--weui-BRAND-DARK: #06AD56; /* 品牌色深色（悬停状态）*/
--weui-BRAND-DISABLED: rgba(7, 193, 96, 0.5); /* 禁用状态品牌色 */
/* ========== 功能色 ========== */
--weui-RED: #FA5151; /* 错误/危险色 */
--weui-ORANGE: #FA9D3B; /* 橙色（警告） */
--weui-YELLOW: #FFC300; /* 黄色（提示） */
--weui-GREEN: #91D300; /* 绿色（成功） */
--weui-LIGHTGREEN: #95EC69; /* 浅绿色 */
--weui-BLUE: #10AEFF; /* 蓝色（信息） */
--weui-LIGHTBLUE: #1482EE; /* 浅蓝色 */
--weui-PURPLE: #818DFF; /* 紫色 */
--weui-WHITE: #FFFFFF; /* 白色 */
--weui-BLACK: #000000; /* 黑色 */
/* ========== 背景色 ========== */
--weui-BG-0: #EDEDED; /* 主背景色（页面底色） */
--weui-BG-1: #F7F7F7; /* 次级背景色 */
--weui-BG-2: #FFFFFF; /* 卡片/模块背景色 */
--weui-BG-3: #F7F7F7; /* 输入框背景色 */
--weui-BG-4: #4C4C4C; /* 蒙层背景色 */
--weui-BG-5: #FFFFFF; /* 弹窗背景色 */
/* ========== 前景色/文字色 ========== */
--weui-FG-0: rgba(0, 0, 0, 0.9); /* 主要文字色 */
--weui-FG-1: rgba(0, 0, 0, 0.5); /* 次要文字色 */
--weui-FG-2: rgba(0, 0, 0, 0.3); /* 辅助/占位文字色 */
--weui-FG-3: rgba(0, 0, 0, 0.1); /* 分割线颜色 */
--weui-FG-4: rgba(0, 0, 0, 0.15); /* 更浅的分割线 */
--weui-FG-5: rgba(0, 0, 0, 0.05); /* 极浅背景 */
/* ========== 链接色 ========== */
--weui-LINK: #576B95; /* 链接文字颜色 */
--weui-LINK-ACTIVE: #354163; /* 链接激活颜色 */
/* ========== 标签背景色 ========== */
--weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
--weui-TAG-BACKGROUND-GREEN: rgba(7, 193, 96, 0.1);
--weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
--weui-TAG-BACKGROUND-PURPLE: rgba(129, 141, 255, 0.1);
}
6.3 暗色模式变量
WeUI 在暗色模式下会自动切换这些变量：
[data-weui-theme='dark'] {
/* 暗色模式下的背景色 */
--weui-BG-0: #111111;
--weui-BG-1: #1E1E1E;
--weui-BG-2: #191919;
--weui-BG-3: #404040;
--weui-BG-4: #4C4C4C;
--weui-BG-5: #2C2C2C;
/* 暗色模式下的文字色 */
--weui-FG-0: rgba(255, 255, 255, 0.8);
--weui-FG-1: rgba(255, 255, 255, 0.5);
--weui-FG-2: rgba(255, 255, 255, 0.3);
--weui-FG-3: rgba(255, 255, 255, 0.1);
--weui-FG-4: rgba(255, 255, 255, 0.15);
--weui-FG-5: rgba(255, 255, 255, 0.05);
/* 暗色模式下的链接色 */
--weui-LINK: #7D90A9;
}
6.4 字体与排版变量
:root {
/* 字体家族 */
--weui-FONT-FAMILY: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* 字体大小 */
--weui-FONT-SIZE-0: 10px; /* 极小字号 */
--weui-FONT-SIZE-1: 12px; /* 辅助字号 */
--weui-FONT-SIZE-2: 14px; /* 正文字号（默认） */
--weui-FONT-SIZE-3: 16px; /* 小标题字号 */
--weui-FONT-SIZE-4: 18px; /* 中标题字号 */
--weui-FONT-SIZE-5: 20px; /* 大标题字号 */
--weui-FONT-SIZE-6: 24px; /* 超大标题字号 */
--weui-FONT-SIZE-7: 28px; /* 特大标题字号 */
--weui-FONT-SIZE-8: 34px; /* 超大标题字号：用于欢迎页 */
--weui-FONT-SIZE-9: 40px; /* 最大标题字号：用于空状态页 */
/* 行高 */
--weui-LINE-HEIGHT-0: 1.2; /* 紧凑行高 */
--weui-LINE-HEIGHT-1: 1.4; /* 正常行高（默认） */
--weui-LINE-HEIGHT-2: 1.6; /* 宽松行高 */
}
6.5 间距与尺寸变量
:root {
/* 基础间距单位（基于 8px 网格系统） */
--weui-SPACING-0: 0px; /* 0 */
--weui-SPACING-1: 4px; /* 0.25rem */
--weui-SPACING-2: 8px; /* 0.5rem */
--weui-SPACING-3: 12px; /* 0.75rem */
--weui-SPACING-4: 16px; /* 1rem */
--weui-SPACING-5: 20px; /* 1.25rem */
--weui-SPACING-6: 24px; /* 1.5rem */
--weui-SPACING-7: 32px; /* 2rem */
--weui-SPACING-8: 40px; /* 2.5rem */
--weui-SPACING-9: 48px; /* 3rem */
--weui-SPACING-10: 56px; /* 3.5rem */
--weui-SPACING-11: 64px; /* 4rem */
/* 组件高度 */
--weui-HEIGHT-BUTTON: 44px; /* 按钮高度（最小触摸区域） */
--weui-HEIGHT-INPUT: 44px; /* 输入框高度 */
--weui-HEIGHT-NAVBAR: 60px; /* 顶部导航栏高度 */
--weui-HEIGHT-TABBAR: 50px; /* 底部 TabBar 高度 */
--weui-HEIGHT-CELL: 56px; /* 列表项高度 */
/* 宽度 */
--weui-WIDTH-ICON: 24px; /* 图标宽度 */
--weui-WIDTH-ICON-LARGE: 32px; /* 大图标宽度 */
}
6.6 圆角与阴影变量
:root {
/* 圆角 */
--weui-BORDER-RADIUS-0: 0px; /* 无圆角 */
--weui-BORDER-RADIUS-1: 4px; /* 小圆角（按钮等） */
--weui-BORDER-RADIUS-2: 8px; /* 中圆角（卡片等） */
--weui-BORDER-RADIUS-3: 12px; /* 大圆角（对话框等） */
--weui-BORDER-RADIUS-4: 16px; /* 超大圆角 */
--weui-BORDER-RADIUS-5: 20px; /* 极大圆角 */
--weui-BORDER-RADIUS-CIRCLE: 50%; /* 圆形 */
/* 阴影 */
--weui-BOX-SHADOW-0: none; /* 无阴影 */
--weui-BOX-SHADOW-1: 0 1px 4px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
--weui-BOX-SHADOW-2: 0 2px 8px rgba(0, 0, 0, 0.08); /* 中等阴影 */
--weui-BOX-SHADOW-3: 0 4px 16px rgba(0, 0, 0, 0.1); /* 较强阴影 */
--weui-BOX-SHADOW-4: 0 8px 24px rgba(0, 0, 0, 0.12); /* 强阴影 */
--weui-BOX-SHADOW-5: 0 12px 32px rgba(0, 0, 0, 0.15); /* 最强阴影 */
}
6.7 动画与过渡变量
:root {
/* 过渡时长 */
--weui-TRANSITION-DURATION-0: 0ms; /* 无过渡 */
--weui-TRANSITION-DURATION-1: 150ms; /* 快速（ hover/focus 反馈） */
--weui-TRANSITION-DURATION-2: 300ms; /* 中速（面板展开/收起） */
--weui-TRANSITION-DURATION-3: 450ms; /* 慢速（页面切换） */
--weui-TRANSITION-DURATION-4: 600ms; /* 特慢（复杂动画） */
/* 过渡缓动函数 */
--weui-EASING-EASE: cubic-bezier(0.25, 0.1, 0.25, 1); /* 标准缓动 */
--weui-EASING-EASE-IN: cubic-bezier(0.42, 0, 1, 1); /* 加速缓动 */
--weui-EASING-EASE-OUT: cubic-bezier(0, 0, 0.58, 1); /* 减速缓动 */
--weui-EASING-EASE-IN-OUT: cubic-bezier(0.42, 0, 0.58, 1); /* 先加速后减速 */
--weui-EASING-SPRING: cubic-bezier(0.18, 0.89, 0.32, 1.28); /* 弹簧效果 */
}
6.8 自定义主题完整示例
通过覆盖 CSS 变量，你可以快速创建品牌主题：
/* custom-theme.css */
:root {
/* 品牌色定制（改为紫色主题） */
--weui-BRAND: #7C3AED;
--weui-BRAND-LIGHT: #EDE9FE;
--weui-BRAND-DARK: #6D28D9;
--weui-LINK: #7C3AED;
--weui-LINK-ACTIVE: #5B21B6;
/* 功能色微调 */
--weui-BLUE: #3B82F6;
--weui-GREEN: #10B981;
--weui-RED: #EF4444;
--weui-ORANGE: #F97316;
/* 圆角增大（更现代的风格） */
--weui-BORDER-RADIUS-1: 8px;
--weui-BORDER-RADIUS-2: 12px;
--weui-BORDER-RADIUS-3: 16px;
--weui-BORDER-RADIUS-4: 20px;
/* 阴影加强 */
--weui-BOX-SHADOW-2: 0 4px 12px rgba(0, 0, 0, 0.1);
--weui-BOX-SHADOW-3: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* 暗色主题定制 */
[data-weui-theme='dark'] {
--weui-BRAND: #8B5CF6;
--weui-BRAND-LIGHT: #2D1B4E;
--weui-BRAND-DARK: #6D28D9;
--weui-LINK: #8B5CF6;
/* 暗色模式下的背景色微调 */
--weui-BG-0: #0F0F1A;
--weui-BG-1: #1A1A2E;
--weui-BG-2: #16213E;
}
