应用开发者

Runtime、Bootstrap 与动画

将已校验主题原子应用到 DOM，并为返回访客恢复首屏偏好。

Runtime 是浏览器唯一状态源

import { migrateOriaStandardV1ToV2 } from "@oriatheme/core";
import { createOriaThemeRuntime } from "@oriatheme/runtime-dom";
import { oriaPresetThemes } from "@oriatheme/presets";

const runtime = createOriaThemeRuntime({
  presets: oriaPresetThemes,
  defaultThemeId: "oria-default",
  migrations: [migrateOriaStandardV1ToV2],
  transition: { type: "view-transition", respectReducedMotion: true },
});

runtime.start();
runtime.setTheme("oria-ocean", { animate: true });
runtime.setAppearance("system");

start 后 Runtime 监听系统模式、持久化和跨标签页更新。调用 destroy 释放单页应用已移除的 Runtime。示例中的 migrations 是接受 v1 持久化 custom theme 的唯一途径；未注册时 v1 数据会被安全拒绝，详见「从 v1 迁移」。

三层首屏顺序

SSR/SSG 先输出从受信任、完整解析的默认主题生成的静态变量。
在 head 运行 createBootstrapStorageScript，或在 Vite 挂载前调用 bootstrapTheme。
框架 Provider 或 Runtime 启动后重新校验所有状态并接管。

tsx

import { createBootstrapStorageScript } from "@oriatheme/runtime-dom";

const bootstrapScript = createBootstrapStorageScript({ contract: { name: "oria-standard", version: 2 } });
// In a Next Server Component head:
<script id="oria-theme-bootstrap" dangerouslySetInnerHTML={{ __html: bootstrapScript }} />

显式操作才动画

给用户触发的 setTheme 或 setAppearance 传入 animate。Bootstrap、恢复、system 变化和跨标签同步始终原子切换，不应播放动画；尊重 reduced motion。

继续：自定义主题生命周期