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 전문 보기 ↗