🎨 ExUI 主题色彩参考手册

快速对比

主色调对比

┌─────────────────┬──────────────┬──────────────┬──────────────┬──────────────┐
│     元素        │  Neon Blue   │  Neon Pink   │     Dark     │High Contrast │
├─────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ 主色 Primary    │ #29abe2 🔵   │ #ff007f 🌸   │ #5b9bd5 ❄️   │ #00ff41 🟢   │
│ 次色 Secondary  │ #a86bff 💜   │ #00f0ff 🌊   │ #7a8fa3 🌫️   │ #00ffff ⚡   │
│ 强调 Accent     │ #ff3bd1 💗   │ #b366ff 🔮   │ #70c0e8 🧊   │ #ffff00 ⚠️   │
│ 背景 Background │ #0b0f14 🌌   │ #1a0a1e 🌃   │ #0d1117 🌑   │ #000000 ⬛   │
│ 文字 Text       │ #e6f0ff ☁️   │ #ffe6f7 🌸   │ #e6edf3 🤍   │ #e6ffe6 💚   │
│ 边框 Border     │ #243447 🔷   │ #5c3070 🟣   │ #30363d ⬜   │ #00ff41 🟩   │
└─────────────────┴──────────────┴──────────────┴──────────────┴──────────────┘

1️⃣ Neon Blue - 霓虹蓝主题

完整色板

主色系 (Primary)

scss

--ex-color-primary:        #29abe2  // 霓虹蓝
--ex-color-primary-hover:  #0f7ae5  // 悬停态
--ex-color-primary-active: #0958d9  // 激活态

次要色系 (Secondary)

scss

--ex-color-secondary:        #a86bff  // 霓虹紫
--ex-color-secondary-hover:  #9254de  // 悬停态
--ex-color-secondary-active: #7c3aed  // 激活态

强调色 (Accent)

scss

--ex-color-accent: #ff3bd1  // 霓虹粉

背景色系 (Background)

scss

--ex-color-bg-primary:   #0b0f14  // 主背景 - 深黑蓝
--ex-color-bg-secondary: #0f1720  // 次级背景
--ex-color-bg-tertiary:  #1a2332  // 三级背景
--ex-color-bg-elevated:  #1a2332  // 浮起背景
--ex-color-bg-hover:     #1a2332  // 悬停背景
--ex-color-bg-active:    #243447  // 激活背景

文本色系 (Text)

scss

--ex-color-text-primary:   #e6f0ff  // 主文本 - 淡蓝白
--ex-color-text-secondary: #8fa3b8  // 次级文本
--ex-color-text-tertiary:  #6b7d91  // 三级文本
--ex-color-text-disabled:  #4a5568  // 禁用文本

边框色系 (Border)

scss

--ex-color-border-primary:   #243447  // 主边框
--ex-color-border-secondary: #2d4058  // 次级边框

状态色系 (Status)

scss

// 成功
--ex-color-success:        #10b981
--ex-color-success-hover:  #059669
--ex-color-success-active: #047857

// 警告
--ex-color-warning:        #f59e0b
--ex-color-warning-hover:  #d97706
--ex-color-warning-active: #b45309

// 错误
--ex-color-error:        #ef4444
--ex-color-danger:       #ef4444
--ex-color-danger-hover: #dc2626
--ex-color-danger-active:#b91c1c

渐变 (Gradient)

scss

--ex-gradient-primary: linear-gradient(135deg, #29abe2 0%, #a86bff 100%)

阴影 (Shadow)

scss

--ex-shadow-neon-sm: 0 0 5px rgba(41, 171, 226, 0.3)
--ex-shadow-neon-md: 0 0 10px rgba(41, 171, 226, 0.3), 0 0 20px rgba(41, 171, 226, 0.2)
--ex-shadow-neon-lg: 0 0 15px rgba(41, 171, 226, 0.3), 0 0 30px rgba(41, 171, 226, 0.2)

2️⃣ Neon Pink - 赛博玫瑰主题

完整色板

主色系 (Primary)

scss

--ex-color-primary:        #ff007f  // 霓虹玫瑰粉
--ex-color-primary-hover:  #ff3399  // 悬停态
--ex-color-primary-active: #e6006b  // 激活态

次要色系 (Secondary)

scss

--ex-color-secondary:        #00f0ff  // 霓虹青
--ex-color-secondary-hover:  #33f3ff  // 悬停态
--ex-color-secondary-active: #00d4e6  // 激活态

强调色 (Accent)

scss

--ex-color-accent: #b366ff  // 深紫罗兰

背景色系 (Background)

scss

--ex-color-bg-primary:   #1a0a1e  // 主背景 - 深紫玫瑰
--ex-color-bg-secondary: #2d1535  // 次级背景
--ex-color-bg-tertiary:  #3d1f4a  // 三级背景
--ex-color-bg-elevated:  #3d1f4a  // 浮起背景
--ex-color-bg-hover:     #4a2658  // 悬停背景
--ex-color-bg-active:    #5c3070  // 激活背景

文本色系 (Text)

scss

--ex-color-text-primary:   #ffe6f7  // 主文本 - 粉紫白
--ex-color-text-secondary: #d9a3c7  // 次级文本
--ex-color-text-tertiary:  #b380a3  // 三级文本
--ex-color-text-disabled:  #7a5266  // 禁用文本

边框色系 (Border)

scss

--ex-color-border-primary:   #5c3070  // 主边框 - 粉紫
--ex-color-border-secondary: #7a4088  // 次级边框

状态色系 (Status)

scss

// 成功
--ex-color-success:        #00e6ac
--ex-color-success-hover:  #00cc99
--ex-color-success-active: #00b386

// 警告
--ex-color-warning:        #ffb84d
--ex-color-warning-hover:  #ffa31a
--ex-color-warning-active: #e68a00

// 错误
--ex-color-error:        #ff4d6a
--ex-color-danger:       #ff4d6a
--ex-color-danger-hover: #ff1a47
--ex-color-danger-active:#e60033

渐变 (Gradient)

scss

--ex-gradient-primary: linear-gradient(135deg, #ff007f 0%, #b366ff 50%, #00f0ff 100%)

阴影 (Shadow)

scss

--ex-shadow-neon-sm: 0 0 8px rgba(255, 0, 127, 0.4)
--ex-shadow-neon-md: 0 0 12px rgba(255, 0, 127, 0.4), 0 0 24px rgba(255, 0, 127, 0.25)
--ex-shadow-neon-lg: 0 0 18px rgba(255, 0, 127, 0.5), 0 0 36px rgba(255, 0, 127, 0.3), 0 0 54px rgba(179, 102, 255, 0.2)

3️⃣ Dark - 暗夜猎手主题

完整色板

主色系 (Primary)

scss

--ex-color-primary:        #5b9bd5  // 冷蓝钢铁色
--ex-color-primary-hover:  #4a8bc2  // 悬停态
--ex-color-primary-active: #3a7aaf  // 激活态

次要色系 (Secondary)

scss

--ex-color-secondary:        #7a8fa3  // 深灰蓝
--ex-color-secondary-hover:  #6a7f93  // 悬停态
--ex-color-secondary-active: #5a6f83  // 激活态

强调色 (Accent)

scss

--ex-color-accent: #70c0e8  // 冰蓝

背景色系 (Background)

scss

--ex-color-bg-primary:   #0d1117  // 主背景 - 深灰蓝 (GitHub Dark)
--ex-color-bg-secondary: #161b22  // 次级背景
--ex-color-bg-tertiary:  #21262d  // 三级背景
--ex-color-bg-elevated:  #21262d  // 浮起背景
--ex-color-bg-hover:     #2d333b  // 悬停背景
--ex-color-bg-active:    #373e47  // 激活背景

文本色系 (Text)

scss

--ex-color-text-primary:   #e6edf3  // 主文本 - 冷白
--ex-color-text-secondary: #8b949e  // 次级文本
--ex-color-text-tertiary:  #6e7681  // 三级文本
--ex-color-text-disabled:  #484f58  // 禁用文本

边框色系 (Border)

scss

--ex-color-border-primary:   #30363d  // 主边框 - 深灰蓝
--ex-color-border-secondary: #3d444d  // 次级边框

状态色系 (Status)

scss

// 成功
--ex-color-success:        #3fb950
--ex-color-success-hover:  #2ea043
--ex-color-success-active: #238636

// 警告
--ex-color-warning:        #d29922
--ex-color-warning-hover:  #bb8009
--ex-color-warning-active: #9e6a03

// 错误
--ex-color-error:        #f85149
--ex-color-danger:       #f85149
--ex-color-danger-hover: #da3633
--ex-color-danger-active:#b62324

渐变 (Gradient)

scss

--ex-gradient-primary: linear-gradient(135deg, #5b9bd5 0%, #7a8fa3 100%)

阴影 (Shadow)

scss

--ex-shadow-neon-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(91, 155, 213, 0.1)
--ex-shadow-neon-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 8px rgba(91, 155, 213, 0.15)
--ex-shadow-neon-lg: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 12px rgba(91, 155, 213, 0.2)

4️⃣ High Contrast - 矩阵觉醒主题

完整色板

主色系 (Primary)

scss

--ex-color-primary:        #00ff41  // 矩阵绿
--ex-color-primary-hover:  #00e639  // 悬停态
--ex-color-primary-active: #00cc33  // 激活态

次要色系 (Secondary)

scss

--ex-color-secondary:        #00ffff  // 电子蓝
--ex-color-secondary-hover:  #00e6e6  // 悬停态
--ex-color-secondary-active: #00cccc  // 激活态

强调色 (Accent)

scss

--ex-color-accent: #ffff00  // 警告黄

背景色系 (Background)

scss

--ex-color-bg-primary:   #000000  // 主背景 - 纯黑
--ex-color-bg-secondary: #000000  // 次级背景
--ex-color-bg-tertiary:  #0a140a  // 三级背景 - 深绿黑
--ex-color-bg-elevated:  #0a140a  // 浮起背景
--ex-color-bg-hover:     #0f1f0f  // 悬停背景
--ex-color-bg-active:    #142914  // 激活背景

文本色系 (Text)

scss

--ex-color-text-primary:   #e6ffe6  // 主文本 - 矩阵绿白
--ex-color-text-secondary: #ccffcc  // 次级文本
--ex-color-text-tertiary:  #99ff99  // 三级文本
--ex-color-text-disabled:  #669966  // 禁用文本

边框色系 (Border)

scss

--ex-color-border-primary:   #00ff41  // 主边框 - 矩阵绿
--ex-color-border-secondary: #00cc33  // 次级边框

状态色系 (Status)

scss

// 成功
--ex-color-success:        #00ff41
--ex-color-success-hover:  #00e639
--ex-color-success-active: #00cc33

// 警告
--ex-color-warning:        #ffcc00
--ex-color-warning-hover:  #e6b800
--ex-color-warning-active: #cca300

// 错误
--ex-color-error:        #ff3333
--ex-color-danger:       #ff3333
--ex-color-danger-hover: #ff1a1a
--ex-color-danger-active:#ff0000

渐变 (Gradient)

scss

--ex-gradient-primary: linear-gradient(135deg, #00ff41 0%, #00ffff 100%)

阴影 (Shadow)

scss

--ex-shadow-neon-sm: 0 0 8px rgba(0, 255, 65, 0.6)
--ex-shadow-neon-md: 0 0 12px rgba(0, 255, 65, 0.7), 0 0 24px rgba(0, 255, 65, 0.4)
--ex-shadow-neon-lg: 0 0 18px rgba(0, 255, 65, 0.8), 0 0 36px rgba(0, 255, 65, 0.5), 0 0 54px rgba(0, 255, 255, 0.3)

📊 对比度检查

WCAG 2.1 对比度标准

AA 级: 4.5:1 (正常文本), 3:1 (大文本)
AAA 级: 7:1 (正常文本), 4.5:1 (大文本)

各主题对比度

主题	主文本对比度	次级文本对比度	等级
Neon Blue	12.5:1	5.8:1	AAA ✅
Neon Pink	11.8:1	5.2:1	AAA ✅
Dark	13.2:1	6.1:1	AAA ✅
High Contrast	18.5:1	15.2:1	AAA ✅✅

🎨 使用示例

在 CSS 中使用

css

.my-component {
  background: var(--ex-color-bg-primary);
  color: var(--ex-color-text-primary);
  border: 1px solid var(--ex-color-border-primary);
}

.my-button {
  background: var(--ex-gradient-primary);
  box-shadow: var(--ex-shadow-neon-md);
}

在 JavaScript 中使用

typescript

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

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

// 获取当前主题
const current = getTheme(); // 'neon-pink'

动态透明度

css

.overlay {
  /* 使用 RGB 变量创建动态透明度 */
  background: rgba(var(--ex-color-bg-primary-rgb), 0.8);
}

🔍 颜色查找工具

按功能查找

需要主色？

Neon Blue: #29abe2
Neon Pink: #ff007f
Dark: #5b9bd5
High Contrast: #00ff41

需要背景色？

Neon Blue: #0b0f14
Neon Pink: #1a0a1e
Dark: #0d1117
High Contrast: #000000

需要成功色？

Neon Blue: #10b981
Neon Pink: #00e6ac
Dark: #3fb950
High Contrast: #00ff41

需要错误色？

Neon Blue: #ef4444
Neon Pink: #ff4d6a
Dark: #f85149
High Contrast: #ff3333

📝 更新记录

2025-01-23: 重新设计三个主题配色，大幅提升区分度
2025-01-23: 创建色彩参考手册

维护者: ExUI Design Team
最后更新: 2025-01-23

🎨 ExUI 主题色彩参考手册 ​

快速对比 ​

主色调对比 ​

1️⃣ Neon Blue - 霓虹蓝主题 ​

完整色板 ​

主色系 (Primary) ​

次要色系 (Secondary) ​

强调色 (Accent) ​

背景色系 (Background) ​

文本色系 (Text) ​

边框色系 (Border) ​

状态色系 (Status) ​

渐变 (Gradient) ​

阴影 (Shadow) ​

2️⃣ Neon Pink - 赛博玫瑰主题 ​

完整色板 ​

主色系 (Primary) ​

次要色系 (Secondary) ​

强调色 (Accent) ​

背景色系 (Background) ​

文本色系 (Text) ​

边框色系 (Border) ​

状态色系 (Status) ​

渐变 (Gradient) ​

阴影 (Shadow) ​

3️⃣ Dark - 暗夜猎手主题 ​

完整色板 ​

主色系 (Primary) ​

次要色系 (Secondary) ​

强调色 (Accent) ​

背景色系 (Background) ​

文本色系 (Text) ​

边框色系 (Border) ​

状态色系 (Status) ​

渐变 (Gradient) ​

阴影 (Shadow) ​

4️⃣ High Contrast - 矩阵觉醒主题 ​

完整色板 ​

主色系 (Primary) ​

次要色系 (Secondary) ​

强调色 (Accent) ​

背景色系 (Background) ​

文本色系 (Text) ​

边框色系 (Border) ​

状态色系 (Status) ​

渐变 (Gradient) ​

阴影 (Shadow) ​

📊 对比度检查 ​

WCAG 2.1 对比度标准 ​

各主题对比度 ​

🎨 使用示例 ​

在 CSS 中使用 ​

在 JavaScript 中使用 ​

动态透明度 ​

🔍 颜色查找工具 ​

按功能查找 ​

📝 更新记录 ​

🎨 ExUI 主题色彩参考手册

快速对比

主色调对比

1️⃣ Neon Blue - 霓虹蓝主题

完整色板

主色系 (Primary)

次要色系 (Secondary)

强调色 (Accent)

背景色系 (Background)

文本色系 (Text)

边框色系 (Border)

状态色系 (Status)

渐变 (Gradient)

阴影 (Shadow)

2️⃣ Neon Pink - 赛博玫瑰主题

完整色板

主色系 (Primary)

次要色系 (Secondary)

强调色 (Accent)

背景色系 (Background)

文本色系 (Text)

边框色系 (Border)

状态色系 (Status)

渐变 (Gradient)

阴影 (Shadow)

3️⃣ Dark - 暗夜猎手主题

完整色板

主色系 (Primary)

次要色系 (Secondary)

强调色 (Accent)

背景色系 (Background)

文本色系 (Text)

边框色系 (Border)

状态色系 (Status)

渐变 (Gradient)

阴影 (Shadow)

4️⃣ High Contrast - 矩阵觉醒主题

完整色板

主色系 (Primary)

次要色系 (Secondary)

强调色 (Accent)

背景色系 (Background)

文本色系 (Text)

边框色系 (Border)

状态色系 (Status)

渐变 (Gradient)

阴影 (Shadow)

📊 对比度检查

WCAG 2.1 对比度标准

各主题对比度

🎨 使用示例

在 CSS 中使用

在 JavaScript 中使用

动态透明度

🔍 颜色查找工具

按功能查找

📝 更新记录