当前流程适用于 Vetta monorepo 中的内置或策展主题。以 packages/themes/builtin/xianxia 为可运行参考,并保持入口文件只负责组装主题能力。
定义主题清单
theme.json 至少声明身份、SDK 版本、构建入口和实际能力:
{
"schemaVersion": 1,
"id": "my-theme",
"version": "0.1.0",
"sdkVersion": "^0.1.0",
"displayName": { "zh-CN": "我的主题", "en-US": "My Theme" },
"runtime": "module-federation",
"entry": "dist/mf-manifest.json",
"moduleFederation": {
"remoteName": "theme_my_theme",
"expose": "./theme"
},
"styles": ["dist/style.css"],
"capabilities": ["appearance"]
}关键字段
Prop
Type
清单中的能力必须反映模块真实提供的内容,入口、远程名称和 expose 必须与 Vite 配置一致。
导出模块
import type { ThemeModule } from "@vetta/theme-sdk";
const theme: ThemeModule = {
meta: {
id: "my-theme",
name: "My Theme",
sdkVersion: "0.1.0",
version: "0.1.0"
},
appearance: {
colors: {
light: { accent: "oklch(0.58 0.12 165)" },
dark: { accent: "oklch(0.72 0.1 165)" }
}
}
};
export default theme;先只实现 appearance 并验证明暗模式,再按需要增加组件、页面或运行时。大型页面与状态逻辑放在独立模块中,入口文件只组合 ThemeModule。