Theme Atlas · 色谱档案
Every color has a story.
在线站点 / Live site → https://lunrenyi.github.io/theme-atlas/
一个有故事的配色主题库。每套主题先讲清楚灵感与出处，再给出可以直接复制、可以导出的颜色。
当前版本收录 33 套主题，覆盖四个系列：中国神话（10 套）、中国瓷器（6 套）、
崩坏：星穹铁道同人（11 套）与游戏世界（6 套，取材自 Stellaris、《命令与征服》
与《星际争霸》）。主题数据与输出格式解耦，以后接入终端、编辑器等其它工具时
只需要新增一个适配器。
站点提供 简体中文与 English 两个版本：中文在根路径（/），英文在 /en/，
两种语言都在构建时生成，没有客户端翻译，也没有运行时翻译服务。
这是什么
Theme Atlas 把每个主题当成一份档案来写：先交代故事从哪儿来，再交代颜色从哪儿来，
最后才是可以直接复制的色值。
- 故事——主题的出处、传说、器物与工艺背景，附可核验的参考。
- 颜色——7 个基础语义角色，每个都有名字、HEX 与用途；需要时可增加
flare 辅助色；另有一套独立的代码语法色。
- 用法——界面 / 终端 / Vim / Codex 四种应用预览、对比度校验、一键复制与导出。
这是一份配色作品集，所以颜色本身是主角：卡片上的色条、详情页顶部的样带、
应用预览里的界面，全部由同一份数据渲染。
视觉系统 · Stellar Atlas
界面使用深空仪表盘式的语言：低饱和的深蓝底、细如轨道线的分割线，
三个强调色只在真正有意义的地方出现。
| Token | 值 | 用途 |
|---|
--space | #080D1C | 页面底色 |
--panel | #111B35 | 面板与读数台 |
--orbit | #344363 | 轨道线、分割线 |
--gold | #DCC38B | 星辰金：品牌与主要操作 |
--quantum | #9885FF | 量子紫：焦点环与数据标记 |
--glow | #76D8DF | 辉光青：实时数值与状态 |
--text | #EAF0FF | 正文 |
- 首屏星图：全站最有辨识度的视觉。中心是一颗分层发光的星体——内核、光晕、
四道光环与两道反向旋转的弧；六条倾角与椭圆率各不相同的轨道里，四条承载系列节点，
两条只用来造纵深；星尘按远近分成三层，另有两片几乎看不见的星云，
以及从核心指向节点的导线。三颗光点沿轨道滑行，鼠标经过时整张图只有几像素的视差。
悬停或键盘聚焦节点时，节点放大、所属轨道点亮，并显示系列名、简短介绍与代表配色；
点击进入对应系列。图形全部为本页绘制的原创 SVG，不含任何第三方素材。
- 详情页读数台：右栏常驻显示关键色块与一张明度光谱图（每根色条的高度
等于该颜色的相对明度），故事、配色表、应用预览与对比度校验在同一条轨道上依次滚动。
- 主题自己的图形：每套主题可以带一幅原创符号画（
plate）。
「齐天 · 破界」的图形是一根金色长轴穿过一圈被打断的轨道——破界的圆与逸出的火星，
全部用这套主题自己的颜色绘制，缩到卡片上仍能认出来。
- 系列个性保留：中国神话仍是朱砂与石青，中国瓷器仍是天青与釉色，
崩坏：星穹铁道是量子紫，游戏世界是信号青与工业色——四个系列不会被统一成同一种蓝紫。
- 没有外部字体、外部图片与运行时依赖；动画很轻，并尊重
prefers-reduced-motion。
四个系列
| 系列 | 配色纪律 | 排列规则 |
|---|
| 中国神话 | 典籍、器物与民间传说留下的颜色 | 手工排序——从创世、瑞兽到节俗与破界 |
| 中国瓷器 | 从胎土到釉层，最后由窑火定色 | 釉层分层——由胎体到釉彩 |
| 崩坏：星穹铁道 同人 | 把想象中的银河，重新折算成颜色 | 明度序列——由暗到亮的光谱 |
| 游戏世界 | 每个世界，都有自己的色彩秩序 | 世界色序——环境、结构、信号与强调按叙事角色排列 |
排列规则定义在 src/lib/arrangement.ts，色条、图例与卡片上的小图都来自同一处。
「游戏世界」在扁平的系列之下再按作品分组（game 字段：stellaris /
red-alert / starcraft），但分组只是展示层的归类，主题数量仍只从系列与
主题数组统计，避免未来迁移到父子结构时重复计数。
语义角色
每套配色固定提供 7 个基础角色，这是主题与使用方之间的唯一契约：
| 角色 | 用途 |
|---|
bg | 页面背景 |
surface | 面板与卡片 |
text | 正文 |
muted | 次要文字与注释 |
border | 分割线与描边 |
accent | 按钮、链接、焦点 |
onAccent | 强调色之上的文字 |
角色与颜色分离，意味着新增一种输出格式（终端、编辑器配色）时不需要改写任何配色数据。
两条补充约定：
- 可选的
flare（次强调）——当主题确实需要第二种更炽烈的颜色（火焰、警示、
需要被看见的一瞬）时才使用。它只出现在少量标记上，不用于正文。
「齐天 · 破界」的烈焰朱就属于这一类。
onAccent 可以省略——省略时自动回落到背景色（强调色之上的文字用底色写），
导出的 CSS 变量与 JSON 仍然完整。
这样一来，一套主题可以正好用七个颜色填满七个位置，而每个颜色都有明确的语义，
不需要让两种角色共用同一个 HEX。
终端预览：Prompt、Vim 与 Codex
详情页的应用预览有四个标签页：界面、终端 Prompt、Vim 与 Codex CLI。
三套终端预览不是截图，而是按主题数据实时渲染的静态 DOM，所以每套主题都有
自己的终端设计，且全部通过构建时校验：
- 独立语法色盘（
Theme.syntax）——11 个语法角色（keyword、function、string、
number、type、variable、property、comment、operator、punctuation、constant），
与界面 7 色分开维护，颜色直接取自语义角色或经对比度校验的专用色值。
Vim 与 Codex 共用 src/data/syntaxExamples.ts 里的同一份代码示例。
- Prompt 设计（
Theme.promptDesign）——字形集、模块顺序（用户、目录、git、
运行时、命令、状态）、motif 构图与密度、单行 / 双行布局，逐主题指定。
- Vim / Codex 设计（
Theme.previewDesign）——窗口布局、当前行 / 选区 /
diff 增删行各自由哪个语义角色承担。
- 终端内只有英文——这是刻意约定：窗口周围的页面界面跟随语言切换，
终端 DOM 内部一律为英文拷贝。
- 构建闸门——
npm run verify:prompt 在构建产物上检查三套预览的模块完整性、
语法角色覆盖与对比度，不达标则以非零码退出。
快速开始
npm install # 安装依赖
npm run dev # 本地开发，默认 http://localhost:4321
npm run build # 构建静态站点到 dist/
npm run preview # 本地预览构建产物
| 命令 | 说明 |
|---|
npm run check | TypeScript / Astro 类型检查 |
npm run contrast | 校验所有主题的 WCAG AA 对比度，不达标则以非零码退出 |
npm run verify:prompt | 构建后校验三套终端预览的完整性与对比度 |
npm run verify | 依次执行类型检查、构建与终端预览校验 |
npm run og | 重新生成社交预览图 public/og-default.png |
双语结构
| 位置 | 内容 |
|---|
src/i18n/index.ts | 全部界面文案的字典（zh / en），t(lang, key) 带占位符替换 |
src/data/themes.ts | 中文主题数据：slug、HEX、语义角色、来源类型等唯一数据源 |
src/data/themes.en.ts | 英文文案覆盖层：标题、故事、灵感、说明、颜色名与备注 |
src/data/collections.ts | 系列数据，中英字段并列（title / titleEn、tagline / taglineEn…） |
src/data/gameWorlds.ts | 「游戏世界」系列内的作品分组元数据 |
src/data/syntaxPalettes.ts、promptDesigns.ts、previewDesigns.ts | 语法色盘与终端设计（每套主题一份） |
src/data/syntaxExamples.ts | Vim / Codex 预览共用的代码 token 示例 |
src/lib/content.ts | 按语言读取主题与系列，把英文文案合并进中文数据 |
src/views/ | 页面视图，接收 lang 参数；src/pages/ 只是路由外壳 |
src/lib/url.ts | localePath()、pathForLocale()：语言前缀与切换链接 |
约定：
- 只有文案被翻译。slug、HEX、语义角色 ID、来源类型和计算逻辑保持不变，
因此不会出现两份互相漂移的配色数据。
- 中文是默认语言，URL 不变；英文使用
/en/ 前缀，
例如 /theme/deep-space-orbit/ ↔ /en/theme/deep-space-orbit/。
- 页面右上角的语言菜单会停留在当前页面：从中文详情切到英文，
仍然是同一个主题的英文详情页。
- 每个页面都输出正确的
html lang、canonical 与 hreflang（含 x-default）。
- 中文页面以中文为主：装饰性英文标签只保留必要的技术名词（CSS、JSON、HEX、SVG、
GitHub 等）。中文界面不再重复拉丁目录代码（
MYTH / CELADON / ORBIT），
区块编号改用「系列一 / 系列二 / 系列三 / 系列四」，标题与页脚一律使用中文。
以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗
