组件 · 配置
Theme 主题
主题入口：导出 ThemeMode/ThemeAppearance/ThemeColors 类型与 DEFAULT_THEME_COLORS。角色：主题配置模块（非 DOM 组件）。
使用建议
- 避免：手写未导出的 CSS 变量名
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
- 限制：kind=component（schema 限制）；实际角色为 theme 配置导出
引入
tsx
import { DEFAULT_THEME_COLORS, THEME_COLOR_KEYS, THEME_COLOR_VARIABLES } from '@selrux/ui/theme';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
该入口无组件导出，演练场不可用。
代码演示
默认角色色
DEFAULT_THEME_COLORS 是库内置的角色色，THEME_COLOR_VARIABLES 是它们对应的 CSS 变量名。
| 键 | CSS 变量 | 默认值 |
|---|---|---|
primary | --srx-primary | #8e51ff |
primaryForeground | --srx-primary-foreground | #09050c |
success | --srx-success | #18a058 |
successForeground | --srx-success-foreground | #09050c |
error | --srx-error | #ff4d4f |
errorForeground | --srx-error-foreground | #09050c |
warning | --srx-warning | #F59E0B |
warningForeground | --srx-warning-foreground | #3d3642 |
info | --srx-info | #3b82f6 |
infoForeground | --srx-info-foreground | #09050c |
carbon | --srx-carbon | #3d3642 |
carbonForeground | --srx-carbon-foreground | #ffffff |
secondary | --srx-secondary | #e5e1e8 |
secondaryForeground | --srx-secondary-foreground | #3d3642 |
accent | --srx-accent | #f4f3f6 |
accentForeground | --srx-accent-foreground | #3d3642 |
API
该入口不导出组件。
导出类型：ThemeAppearance、ThemeColorKey、ThemeColors、ThemeMode
函数与常量
| 名称 | 说明 | 签名 / 类型 |
|---|---|---|
DEFAULT_THEME_COLORS | 八个角色及其成对前景的库默认值。destructive 默认不单独列出，由 error 承担。 | Record<"info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | "primaryForeground" | "successForeground" | "errorForeground" | "warningForeground" | "infoForeground" | "carbonForeground" | "secondaryForeground" | "accentForeground", string> |
THEME_COLOR_KEYS | 允许覆盖的角色色及成对前景。 | readonly ["primary", "primaryForeground", "success", "successForeground", "error", "errorForeground", "warning", "warningForeground", "info", "infoForeground", "carbon", "carbonForeground", "secondary", "secondaryForeground", "accent", "accentForeground", "destructive", "destructiveForeground"] |
THEME_COLOR_VARIABLES | 颜色键对应的公开 CSS 变量。 | Record<"info" | "success" | "warning" | "error" | "primary" | "destructive" | "carbon" | "secondary" | "accent" | "primaryForeground" | "successForeground" | "errorForeground" | "warningForeground" | "infoForeground" | "carbonForeground" | "secondaryForeground" | "accentForeground" | "destructiveForeground", string> |