Runtime, Bootstrap, and transitions

The runtime is the browser’s single state source

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");

After start, the runtime watches system mode, persistence, and cross-tab updates. Call destroy when an SPA removes the runtime. The migrations field in the example is the only way to accept persisted v1 custom themes; without it, v1 data is rejected safely. See "Migrate from v1".

Three first-paint layers

1. SSR/SSG first outputs static variables generated from a trusted, fully resolved default theme.
2. Run createBootstrapStorageScript in head, or call bootstrapTheme before a Vite mount.
3. The framework Provider or runtime revalidates all state and takes ownership after start.

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 }} />

Only explicit actions animate

Pass animate for user-triggered setTheme or setAppearance calls. Bootstrap, restore, system changes, and cross-tab sync always switch atomically without animation; respect reduced motion.