菜单
Add a new color theme to the Ontology Playground. Use when someone wants to create, author, or plug in a theme, palette, color scheme, dark mode, or light mode, or add an entry to the theme picker. Covers the appStore registration plus the CSS token block.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/microsoft/Ontology-Playground --skill theme-authoring命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Add a contributor ontology to catalogue/community/. Use when a community member submits an RDF/OWL file and wants it listed in the Playground catalogue under their GitHub username.
Generate approved person names for examples, demos, quests, tests, docs, and sample data. Use when a task needs fictional person names, customer names, employee names, patient names, student names, instructor names, or other human names.
Import customer or external RDF/OWL into this repo's catalogue format. Use when user drops an RDF/OWL file and wants it catalogue-ready (metadata, category, validation, compile).
基于 SOC 职业分类
正在显示 SKILL.md
| name | theme-authoring |
| description | Add a new color theme to the Ontology Playground. Use when someone wants to create, author, or plug in a theme, palette, color scheme, dark mode, or light mode, or add an entry to the theme picker. Covers the appStore registration plus the CSS token block. |
Plug a new color theme into the Playground so it appears in the header theme picker, is remembered across sessions, and themes every surface (main graph, designer preview, learn pages) — with no component or graph-rendering edits.
docs/theme-authoring-guide.md — full architecture, token table, gotchas, worked example.src/store/appStore.ts — ThemeId, THEME_OPTIONS, DARK_BASED_THEMES, isDarkTheme, themeClass.src/styles/app.css — the :root / .light-theme / .theme-aurora / .theme-crimson token blocks (copy the nearest one).Ask the user:
indigo) and display label (e.g. Indigo)?DARK_BASED_THEMES membership and which block to copy.)--ms-blue* / --info)?Make all edits in src/store/appStore.ts and
src/styles/app.css. The guide's
"Add a theme in six steps" section has copy-paste snippets.
ThemeId union.THEME_OPTIONS entry: { id, label, swatch } (swatch = accent hex).DARK_BASED_THEMES. If light-based, leave it out.themeClass() case:
return 'theme-<id>';return 'light-theme theme-<id>'; (layer over the light base)..theme-<id> block in app.css by copying .theme-aurora (dark) or
.theme-crimson (light) and retuning the tokens.--chess-square-light is the graph
canvas's solid backdrop. The theme class sits on .app-container, not <body>,
and <body> stays dark (#1B1B1B). A translucent --chess-square-light lets
the dark body bleed through → dark canvas + unreadable labels. Use an opaque
light color (e.g. #FBF7F8), not rgba(..., 0.03). (Guide → Gotcha 1.)--graph-bg, --graph-node-text,
--graph-edge-color, --graph-edge-text, --graph-edge-label-bg in the
block; the graph and designer read them at runtime. No .tsx edits.--on-accent (label color on accent fills) to a
dark value for a light accent (white fails on Aurora's mint) and white
for a dark accent. Edge text must clear 4.5:1 against --graph-edge-label-bg.
Stat-tile icons/values (--stat-blue/green/purple) need 3:1 over the tint and
cascade automatically (bright from :root, dark from .light-theme). Amber
text/icons use --ms-yellow-fg (bright #FFB900 on dark, dark gold #8A6A00
on light); the .progress-fill stops --progress-from/--progress-to each
need 3:1 on the --bg-tertiary track.
npm run test:a11y enforces this for every theme. (Guide → Accessibility.)DARK_BASED_THEMES so darkMode is correct
(graph fallback, label backplate, PNG export bg).If any example data, docs, or sample instances need person names, use the
name-generator skill — do not invent names.
npm run dev # switch to the theme in the header; check graph, designer, learn pages
npm run test:a11y # WCAG 2.1 AA contrast for every theme (also a CI gate)
npx tsc --noEmit # the ThemeId union change is type-checked here
npm run build # full build
If npm run build only changed public/learn.json (a timestamp), revert it:
git checkout -- public/learn.json.
localStorage['theme']).npm run test:a11y passes (WCAG 2.1 AA contrast for the new theme).tsc --noEmit and npm run build pass; no brand references introduced.