全局 CSS 变量

约 974 字大约 3 分钟

2026-04-13

本文用于维护 Web 端自定义组件可使用的全局 CSS 变量说明，便于在页面增强、自定义页面和通用组件开发中统一样式表达。

适用范围

Web 端自定义组件
页面增强场景中的样式开发
需要与宿主应用保持视觉一致的展示类组件

使用建议

优先使用全局 CSS 变量，而不是直接写死颜色、圆角、阴影等样式值
新增展示组件时，优先复用已有变量，保持与应用整体风格一致
仅在变量无法覆盖的场景下，再补充局部自定义样式

使用方式

.demo-card {
  color: var(--fx-text-color, #333);
  background: var(--fx-fill-color, #fff);
  border-radius: var(--fx-border-radius, 4px);
}

如果变量存在默认值要求，建议通过 var(--token, fallback) 的方式提供兜底值，避免宿主环境未注入变量时影响展示。

变量清单

当前页面用于统一维护变量定义。下面先整理一批当前可用的主题与应用级变量。

主色变量

变量名	含义	适用范围	默认值/说明
`--color-primary00`	主色最浅色阶	背景、浅色提示区	`#fffbf0`
`--color-primary01`	主色浅色阶	浅背景、弱强调区	`#FFF7E6`
`--color-primary02`	主色浅色阶	hover 背景、辅助底色	`#FFDDA3`
`--color-primary03`	主色浅中间色阶	辅助强调色	`#FFCA7A`
`--color-primary04`	主色中间色阶	强调背景、装饰色	`#FFB452`
`--color-primary05`	主色中间色阶	按钮、标签、强调色	`#FF9B29`
`--color-primary06`	主品牌主色	主按钮、链接、重点操作	`#FF8000`
`--color-primary07`	主色深色阶	激活态、按下态	`#D96500`
`--color-primary08`	主色深色阶	深色强调、边框	`#B34D00`
`--color-primary09`	主色更深色阶	重点强调、深色文字	`#8C3800`
`--color-primary10`	主色最深色阶	深色标题、极强对比场景	`#662500`

主色 RGB 变量

变量名	含义	适用范围	默认值/说明
`--color-primary00-rgb`	`--color-primary00` 的 RGB 值	`rgba()` 透明度场景	`255, 251, 240`
`--color-primary01-rgb`	`--color-primary01` 的 RGB 值	`rgba()` 透明度场景	`255, 247, 230`
`--color-primary02-rgb`	`--color-primary02` 的 RGB 值	`rgba()` 透明度场景	`255, 221, 163`
`--color-primary03-rgb`	`--color-primary03` 的 RGB 值	`rgba()` 透明度场景	`255, 202, 122`
`--color-primary04-rgb`	`--color-primary04` 的 RGB 值	`rgba()` 透明度场景	`255, 180, 82`
`--color-primary05-rgb`	`--color-primary05` 的 RGB 值	`rgba()` 透明度场景	`255, 155, 41`
`--color-primary06-rgb`	`--color-primary06` 的 RGB 值	`rgba()` 透明度场景	`255, 128, 0`
`--color-primary07-rgb`	`--color-primary07` 的 RGB 值	`rgba()` 透明度场景	`217, 101, 0`
`--color-primary08-rgb`	`--color-primary08` 的 RGB 值	`rgba()` 透明度场景	`179, 77, 0`
`--color-primary09-rgb`	`--color-primary09` 的 RGB 值	`rgba()` 透明度场景	`140, 56, 0`
`--color-primary10-rgb`	`--color-primary10` 的 RGB 值	`rgba()` 透明度场景	`102, 37, 0`

应用级变量

变量名	含义	适用范围	默认值/说明
`--fx-company-main-nav-fore-color`	主导航前景色	顶部导航文字、图标	`#181c25`
`--fx-company-main-menu-selected-bg-color`	主菜单选中背景色	导航菜单选中态背景	`255, 255, 255`，建议结合 `rgb()` 或宿主定义使用
`--fx-company-main-bg`	应用主背景色	页面主背景、容器底色	`#EFF1F3`
`--fx-company-main-detail-bg`	详情区域背景色	详情页、卡片区背景	`#EFF1F3`
`--fx-nheader-width`	顶部头部宽度占位	布局计算、内容区域偏移	`0px`
`--app-content-height`	应用页面区域高度	布局计算、内容区域撑满	--

示例

.welcome-banner {
  color: var(--fx-company-main-nav-fore-color, #181c25);
  background: var(--color-primary00, #fffbf0);
}

.welcome-banner--active {
  background: rgba(var(--color-primary06-rgb, 255, 128, 0), 0.08);
  border: 1px solid var(--color-primary06, #FF8000);
}

维护建议

新增变量时，优先采用语义化命名，而不是业务化命名
同一类变量建议按颜色、文字、边框、间距等维度分类整理
变量说明应包含用途、适用范围和兜底值建议