墨色主题
柔和暖黑;适用写作、阅读、文化内容。基准色为工作参考值,基准色待设计确认,UI 主色待校准。
实验本期新增已接入
摘要
| 规范 ID | theme.xuanqing.mose |
|---|---|
| 色系 | 玄青色系(family.xuanqing) |
| 模式支持 | 深色(dark) |
| 传统色出处 | 墨色 |
| 基准色 | #363230 |
| 差量基础 | 基础主题(无差量,完整定义) |
UI 主色
主色取自语义映射 resolvedTokens.primary,是主题在组件上的核心品牌色;色阶中同值条目已标注对应步进。
| 色块 | |
|---|---|
| HEX | #a8a4a1 |
| OKLCH | oklch(0.721 0.007 48.5) |
| 色阶步进 | step 5 |
色阶
OKLCH 生成的 10 阶色阶(step 1 最浅 → step 10 最深),附 sRGB 回退与 HEX;点击行可在右侧看板查看条目属性。
| step | 色块 | HEX | OKLCH | sRGB 回退 |
|---|---|---|---|---|
| 1 | #fbfaf9 | oklch(0.985 0.002 48.5) | #fbfaf9 | |
| 2 | #f7f5f3 | oklch(0.971 0.003 48.5) | #f7f5f3 | |
| 3 | #e1dddc | oklch(0.901 0.004 48.5) | #e1dddc | |
| 4 | #c4c0be | oklch(0.811 0.006 48.5) | #c4c0be | |
| 5 | #a8a4a1 | oklch(0.721 0.007 48.5) | #a8a4a1 | |
| 6 | #878280 | oklch(0.611 0.007 48.5) | #878280 | |
| 7 | #696563 | oklch(0.511 0.006 48.5) | #696563 | |
| 8 | #4d4a48 | oklch(0.411 0.006 48.5) | #4d4a48 | |
| 9 | #353231 | oklch(0.321 0.005 48.5) | #353231 | |
| 10 | #1f1c1b | oklch(0.231 0.004 48.5) | #1f1c1b |
语义映射
resolvedTokens 完整解析映射(键名对齐组件库语义令牌,省略 -- 前缀);每行可复制为 CSS 变量声明。
| Token | 值 | 复制 |
|---|---|---|
background | #1f1c1b | |
foreground | #fbfaf9 | |
card | #353231 | |
card-foreground | #fbfaf9 | |
popover | #353231 | |
popover-foreground | #fbfaf9 | |
primary | #a8a4a1 | |
primary-foreground | #1f1c1b | |
secondary | #4d4a48 | |
secondary-foreground | #fbfaf9 | |
muted | #4d4a48 | |
muted-foreground | #c3c1bf | |
accent | #4d4a48 | |
accent-foreground | #fbfaf9 | |
destructive | #ef4444 | |
destructive-foreground | #ffffff | |
border | #676665 | |
input | #676665 | |
ring | #a8a4a1 | |
chart-1 | #a8a4a1 | |
chart-2 | #e1dddc | |
chart-3 | #696563 | |
chart-4 | #c4c0be | |
chart-5 | #4d4a48 |
可访问性
不适用:对比度数据待接入:主色与前景 / 背景的 WCAG 对比度验收为发布矩阵(§12)待办项,当前主题成熟度为实验;数据接入后在此展示对比度与达标级别。
复制配置
两种输出均经复制按钮追加构建标注(构建版本 + Git 提交号);差量输出用于以本主题为基础派生变体,完整输出用于一次性导入全部语义 Token。
本主题为基础主题(无 baseThemeId),差量输出为 "baseThemeId": null 与空 overrides;派生变体时请以此为基底引用本主题 ID。
{
"background": "#1f1c1b",
"foreground": "#fbfaf9",
"card": "#353231",
"card-foreground": "#fbfaf9",
"popover": "#353231",
"popover-foreground": "#fbfaf9",
"primary": "#a8a4a1",
"primary-foreground": "#1f1c1b",
"secondary": "#4d4a48",
"secondary-foreground": "#fbfaf9",
"muted": "#4d4a48",
"muted-foreground": "#c3c1bf",
"accent": "#4d4a48",
"accent-foreground": "#fbfaf9",
"destructive": "#ef4444",
"destructive-foreground": "#ffffff",
"border": "#676665",
"input": "#676665",
"ring": "#a8a4a1",
"chart-1": "#a8a4a1",
"chart-2": "#e1dddc",
"chart-3": "#696563",
"chart-4": "#c4c0be",
"chart-5": "#4d4a48"
}