Neo 平台主题换肤系统

品牌 / 按钮 / 导航 三色独立体系 · HEX 主变量 + -RGB 伴侣变量 · ThemeHelper API

橙色主题
导航栏
#16A34A
🌙 自动·深色
品牌色
#7C3AED
🌙 自动·深色
按钮色
#e01a87

组件预览 — 六大元素类型对品牌色 CSS 变量的使用

以下所有组件均通过 ThemeHelper 的真实 CSS 变量消费品牌色，切换主题时颜色同步更新

⚡按钮 Button
11+8个变量
Filled Primary（hover 使用 --color-button-filled-primary-hover + --color-button-filled-primary-color-hover）
Secondary（★ 次按钮 — 每个变量降一级变浅，palette[4]/[hoverIdx-1]/[1]）
Outline（★ 文字/边框复用 --color-button-filled-primary）
Text Button（★ 文字复用 --color-button-filled-primary）
覆盖变量：--color-button-filled-primary-*（一套变量覆盖 fill / border / outline / text 四种形态）
🔗文字链接 Link
交互型
查看详情页 →›
下载报表数据›
编辑配置项›
删除此记录›
品牌色链接（--color-text-brand）›
Hover 变量：--color-text-brand-link(正常) → hover 文字: --color-text-brand-hover · hover 背景: --color-bg-brand-tint · hover 箭头: --color-icon-brand-hover
🎨背景 Background
7个变量
BG Brand
品牌主色背景
--color-bg-brand → hover: --color-bg-brand-hover
BG Shade
深色变体
--color-bg-brand-shade
BG Tint
浅色变体
--color-bg-brand-tint
Tint Light
次浅变体
--color-bg-brand-tint-light
Disabled
禁用态
--color-bg-brand-disabled
--brand-color
原始品牌色
--brand-color
📐边框 Border
7个变量
聚焦输入框边框
--color-border-brand → hover: --color-border-brand-hover
Hover 状态边框
--color-border-brand-shade
虚线选框
--color-border-brand-tint
次浅边框
--color-border-brand-tint-light
禁用态边框
--color-border-brand-disabled
✦图标 Icon
8个变量
★
♦
✦
→
⊘
Solid: --color-icon-brand → hover: --color-icon-brand-hover
Tint: --color-icon-brand-tint → hover: --color-icon-brand-hover
Outline: --color-border-brand → hover: --color-icon-brand-hover
Link: --color-icon-fill-brand-link → hover: --color-icon-brand-hover
Disabled: --color-icon-brand-disabled
Aa文本 Text
8个变量
主要文本--color-text-brand → hover: --color-text-brand-hover
次要文本 / Hover态--color-text-brand-shade → hover: --color-text-brand-hover
浅底高亮文本块bg:tint + text:brand → hover: --color-text-brand-hover
禁用态文本--color-text-brand-disabled
次浅色文字--color-text-brand-tint-light
📊综合数据卡
多元素组合
2,847
活跃用户
↑ 12.5%
94%
完成率
↑ 3.2%
¥58K
本月营收
↓ 2.1%
✨半透明覆盖层
-RGB 伴侣变量
Aa
覆盖层效果 — 通过 -rgb 伴侣变量实现
核心用法：rgba(var(--brand-color-rgb), 0.72) — 纯 CSS 实现，无需 JavaScript 运行时转换。ThemeHelper 在 setBaseColor() 时自动为每个 hex 变量生成对应的 -rgb 伴侣变量（纯数值格式如 255, 107, 53），直接嵌入 rgba() 函数中使用。
格式: rgba(var(--xxx-rgb), <alpha>)
当前: rgba(var(--brand-color-rgb), 0.72)

当前全部品牌色 CSS 变量（HEX + -RGB 双变量模式）

一、品牌核心变量 (--brand-color-*) 6 对（12 行）
色块CSS 变量名当前值CSS变量说明
品牌色阶变量 (--brand-color-1~10) 10 对（20 行）
色块CSS 变量名当前值CSS变量说明
二、按钮色变量 (--color-button-filled-primary-*) 11+8 个（含 -rgb 伴侣 + 3个次按钮变量，fill/border/outline/text 共用）
色块CSS 变量名当前值CSS变量说明
三、背景相关 (--color-bg-brand-*) 6 对（12 行）
色块CSS 变量名当前值CSS变量说明
四、边框相关 (--color-border-brand-*) 6 对（12 行）
色块CSS 变量名当前值CSS变量说明
五、图标相关 (--color-icon-brand-*) 7 对（14 行）
色块CSS 变量名当前值CSS变量说明
六、文字/文字链接相关 (--color-text-brand-*) 7 对（14 行）
色块CSS 变量名当前值CSS变量说明
七、导航栏变量 (--brand-nav-header-*) ~17 个（含 -rgb 伴侣）
色块CSS 变量名当前值CSS变量说明