🎨 ExUI 主题设计指南

四大主题配色方案

ExUI 提供四种精心设计的主题，每个主题都有独特的视觉特征和使用场景。

1️⃣ Neon Blue (霓虹蓝) - 默认主题

设计理念: 赛博朋克风格，霓虹蓝紫双色系统

核心配色

scss

主色调: #29abe2  // 霓虹蓝
次要色: #a86bff  // 霓虹紫
强调色: #ff3bd1  // 霓虹粉
背景色: #0b0f14  // 深黑蓝

视觉特征

🌊 蓝紫渐变: 135度对角渐变，营造未来科技感
✨ 霓虹发光: 多层阴影模拟霓虹灯管效果
🌃 赛博朋克氛围: 深色背景配合明亮霓虹色
🔄 双色交替: 悬停时蓝粉互换

使用场景

赛博朋克风格应用
科技创新平台
未来感创意工具
高科技产品展示
数据可视化系统

2️⃣ Neon Pink (霓虹粉) - "赛博玫瑰"

设计理念: 以霓虹粉为主导，搭配深紫和青色，营造浪漫而神秘的赛博朋克氛围

核心配色

scss

主色调: #ff007f  // 霓虹玫瑰粉
次要色: #00f0ff  // 霓虹青
强调色: #b366ff  // 深紫罗兰
背景色: #1a0a1e  // 深紫玫瑰

视觉特征

🌹 玫瑰渐变: 粉→紫→青三色渐变
💜 深紫背景: 带紫调的深色背景
🎭 浪漫神秘: 粉紫色调营造梦幻感
✨ 强烈发光: 玫瑰粉发光效果更明显

配色对比

元素	Neon Blue	Neon Pink
主色	蓝 #29abe2	粉 #ff007f
次色	紫 #a86bff	青 #00f0ff
背景	黑蓝 #0b0f14	紫黑 #1a0a1e
氛围	科技冷酷	浪漫神秘

使用场景

女性向应用
时尚/美妆平台
社交应用
创意设计工具

3️⃣ Dark (暗黑) - "暗夜猎手"

设计理念: 极简暗黑风格，以深灰和冷蓝为主，强调专业和高效

核心配色

scss

主色调: #5b9bd5  // 冷蓝钢铁色
次要色: #7a8fa3  // 深灰蓝
强调色: #70c0e8  // 冰蓝
背景色: #0d1117  // 深灰蓝 (GitHub Dark 风格)

视觉特征

🌑 极简暗黑: 去除霓虹效果，更专业
❄️ 冷色调: 蓝灰色系，冷静理性
📊 GitHub 风格: 参考 GitHub Dark 配色
🔇 低饱和度: 降低视觉刺激，护眼

配色对比

元素	Neon Blue	Dark
主色	亮蓝 #29abe2	冷蓝 #5b9bd5
背景	纯黑 #0b0f14	灰蓝 #0d1117
发光	强霓虹发光	微弱发光
饱和度	高	低
对比度	高	中

使用场景

开发工具 IDE
代码编辑器
数据分析平台
专业办公应用
长时间使用场景

4️⃣ High Contrast (高对比度) - "矩阵觉醒"

设计理念: 黑客风格的绿色矩阵主题，极高对比度，科技感十足

核心配色

scss

主色调: #00ff41  // 矩阵绿
次要色: #00ffff  // 电子蓝
强调色: #ffff00  // 警告黄
背景色: #000000  // 纯黑

视觉特征

🟢 矩阵绿: 经典黑客风格绿色
⚡ 极高对比: 纯黑背景 + 纯色文字
🎬 电影感: 《黑客帝国》风格
♿ 无障碍: 符合 WCAG AAA 标准

配色对比

元素	Neon Blue	High Contrast
主色	蓝 #29abe2	绿 #00ff41
背景	深蓝黑	纯黑 #000000
文字	淡蓝白	绿白 #e6ffe6
边框	灰蓝	矩阵绿
对比度	高	极高

特殊功能

2px 边框增强
3px 焦点指示器
矩阵绿发光效果
渐变背景扫描线

使用场景

视力障碍用户
强光环境使用
黑客/极客风格应用
终端/命令行工具
科技展示

🎯 主题选择建议

按使用场景选择

场景	推荐主题	原因
赛博朋克应用	Neon Blue	未来科技感强，视觉冲击力大
社交应用	Neon Pink	浪漫温暖，吸引年轻用户
开发工具	Dark	护眼专业，适合长时间使用
无障碍需求	High Contrast	极高对比度，符合无障碍标准

按用户群体选择

用户群体	推荐主题	原因
科技爱好者	Neon Blue	符合赛博朋克审美
女性用户	Neon Pink	色彩温暖浪漫
开发者	Dark	专业简洁
视障用户	High Contrast	高对比度易读

按时间段选择

时间段	推荐主题	原因
白天	Dark	降低屏幕亮度
夜晚	Neon Blue/Pink	霓虹效果更明显
全天	Dark	最护眼

🎨 设计原则

1. 区分度原则

每个主题都有独特的视觉特征：

Neon Blue: 蓝紫双色 + 强霓虹
Neon Pink: 粉青紫三色 + 深紫背景
Dark: 冷灰蓝 + 微发光
High Contrast: 矩阵绿 + 纯黑背景

2. 可读性原则

所有主题都确保：

文字与背景对比度 ≥ 4.5:1 (WCAG AA)
High Contrast 对比度 ≥ 7:1 (WCAG AAA)
避免纯红纯绿等刺眼颜色
状态色清晰可辨

3. 一致性原则

四个主题保持：

相同的组件结构
相同的间距系统
相同的动画效果
相同的交互逻辑

4. 性能原则

Dark 主题禁用复杂发光效果
响应 prefers-reduced-motion
优化 CSS 变量数量
减少重绘重排

🔧 技术实现

CSS 变量命名规范

scss

// 主色系
--ex-color-primary          // 主色
--ex-color-primary-hover    // 主色悬停
--ex-color-primary-active   // 主色激活

// 透明度变体
--ex-color-primary-alpha-10  // 10% 透明度
--ex-color-primary-alpha-20  // 20% 透明度

// RGB 格式（用于动态透明度）
--ex-color-primary-rgb       // RGB 值

主题切换

typescript

import { setTheme } from 'vue-ex-ui';

// 切换主题
setTheme('neon-pink');
setTheme('dark');
setTheme('high-contrast');

自定义主题

scss

[data-theme='custom'] {
  --ex-color-primary: #your-color;
  --ex-color-bg-primary: #your-bg;
  // ... 其他变量
}

📊 主题对比表

特性	Neon Blue	Neon Pink	Dark	High Contrast
主色	霓虹蓝	玫瑰粉	冷蓝	矩阵绿
背景	深黑蓝	深紫黑	深灰蓝	纯黑
发光强度	强	强	弱	强
饱和度	高	高	低	极高
对比度	高	高	中	极高
护眼性	中	中	高	中
赛博朋克感	★★★★★	★★★★☆	★★☆☆☆	★★★★☆
专业感	★★★☆☆	★★☆☆☆	★★★★★	★★★★☆
浪漫感	★★★☆☆	★★★★★	★☆☆☆☆	★☆☆☆☆
科技感	★★★★★	★★★★☆	★★★★☆	★★★★★

🎯 最佳实践

1. 主题选择

默认使用 Neon Blue（品牌主题）
提供主题切换器让用户选择
记住用户的主题偏好

2. 响应系统偏好

typescript

import { useSystemTheme } from 'vue-ex-ui';

// 自动跟随系统主题
useSystemTheme();

3. 无障碍支持

为视障用户默认启用 High Contrast
响应 prefers-contrast: high
提供键盘快捷键切换主题

4. 性能优化

使用 CSS 变量而非 JavaScript 切换
避免在主题切换时重新渲染组件
预加载主题样式

📝 更新日志

v1.0.0 (2025-01-23)

✨ 重新设计三个主题配色
🎨 Neon Pink: 改为玫瑰粉 + 深紫背景
🌑 Dark: 改为 GitHub Dark 风格冷灰蓝
🟢 High Contrast: 改为矩阵绿黑客风格
📊 大幅提升主题区分度
♿ 改善无障碍支持

🤝 贡献指南

如果你想为主题系统贡献：

确保新主题符合设计原则
提供完整的 CSS 变量定义
测试所有组件的显示效果
更新本文档

📚 相关文档

设计师: ExUI Design Team
最后更新: 2025-01-23

🎨 ExUI 主题设计指南 ​

四大主题配色方案 ​

1️⃣ Neon Blue (霓虹蓝) - 默认主题 ​

核心配色 ​

视觉特征 ​

使用场景 ​

2️⃣ Neon Pink (霓虹粉) - "赛博玫瑰" ​

核心配色 ​

视觉特征 ​

配色对比 ​

使用场景 ​

3️⃣ Dark (暗黑) - "暗夜猎手" ​

核心配色 ​

视觉特征 ​

配色对比 ​

使用场景 ​

4️⃣ High Contrast (高对比度) - "矩阵觉醒" ​

核心配色 ​

视觉特征 ​

配色对比 ​

特殊功能 ​

使用场景 ​

🎯 主题选择建议 ​

按使用场景选择 ​

按用户群体选择 ​

按时间段选择 ​

🎨 设计原则 ​

1. 区分度原则 ​

2. 可读性原则 ​

3. 一致性原则 ​

4. 性能原则 ​

🔧 技术实现 ​

CSS 变量命名规范 ​

主题切换 ​

自定义主题 ​

📊 主题对比表 ​

🎯 最佳实践 ​

1. 主题选择 ​

2. 响应系统偏好 ​

3. 无障碍支持 ​

4. 性能优化 ​

📝 更新日志 ​

v1.0.0 (2025-01-23) ​

🤝 贡献指南 ​

📚 相关文档 ​

🎨 ExUI 主题设计指南

四大主题配色方案

1️⃣ Neon Blue (霓虹蓝) - 默认主题

核心配色

视觉特征

使用场景

2️⃣ Neon Pink (霓虹粉) - "赛博玫瑰"

核心配色

视觉特征

配色对比

使用场景

3️⃣ Dark (暗黑) - "暗夜猎手"

核心配色

视觉特征

配色对比

使用场景

4️⃣ High Contrast (高对比度) - "矩阵觉醒"

核心配色

视觉特征

配色对比

特殊功能

使用场景

🎯 主题选择建议

按使用场景选择

按用户群体选择

按时间段选择

🎨 设计原则

1. 区分度原则

2. 可读性原则

3. 一致性原则

4. 性能原则

🔧 技术实现

CSS 变量命名规范

主题切换

自定义主题

📊 主题对比表

🎯 最佳实践

1. 主题选择

2. 响应系统偏好

3. 无障碍支持

4. 性能优化

📝 更新日志

v1.0.0 (2025-01-23)

🤝 贡献指南

📚 相关文档