用途:把新配色主题接入 Ontology Playground,使其出现在头部主题选择器中、跨会话记忆,并作用于主图、设计器预览和学习页,无需改动组件或图形渲染代码。
主要能力:通过修改 src/store/appStore.ts 与 src/styles/app.css 完成主题注册与调色。需先阅读 docs/theme-authoring-guide.md、appStore.ts(ThemeId、THEME_OPTIONS、DARK_BASED_THEMES、isDarkTheme、themeClass)和 app.css 中的 :root / .light-theme / .theme-aurora / .theme-crimson 令牌块。
使用方式:先确认主题 id(小写)、显示标签、深色或浅色基底、强调色,以及是否指定表面/文字/图形颜色。随后在 ThemeId 联合类型加入 id;添加 THEME_OPTIONS 条目 { id, label, swatch };深色基底加入 DARK_BASED_THEMES;为 themeClass() 添加分支(深色返回 'theme-<id>',浅色返回 'light-theme theme-<id>');在 app.css 复制 .theme-aurora(深色)或 .theme-crimson(浅色)并调整令牌。
限制与规则:浅色主题的 --chess-square-light 必须为不透明色,否则深色 body 透出导致画布变暗、标签不可读;图形颜色由 CSS 驱动,需定义 --graph-bg、--graph-node-text、--graph-edge-color、--graph-edge-text、--graph-edge-label-bg,不修改 .tsx;需满足 WCAG 2.1 AA 对比度(文字 4.5:1,非文字 3:1),--on-accent 按强调色明暗取深色或白色;深色主题须登记到 DARK_BASED_THEMES;id、标签、注释与提交中不得出现品牌名。示例人名须使用 name-generator 技能生成。
验证:npm run dev、npm run test:a11y、npx tsc --noEmit、npm run build;若 build 仅改动 public/learn.json 时间戳,用 git checkout -- public/learn.json 还原。完成标准包括选择器出现新色块与标签、localStorage['theme'] 持久化、各页面可读、原有主题不变、a11y 与构建通过。