OriaTheme
GitHub

애플리케이션 개발자용

Runtime, Bootstrap 및 전환

검증된 테마를 DOM에 원자적으로 적용하고 재방문자의 첫 번째 페인트 기본 설정을 복원합니다.

런타임은 브라우저의 단일 상태 소스입니다.

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

시작 후 런타임은 시스템 모드, 지속성 및 크로스탭 업데이트를 감시합니다. SPA가 런타임을 제거할 때 destroy를 호출하십시오. 예제의 migrations 필드는 지속형 v1 사용자 정의 테마를 허용하는 유일한 방법입니다. 그렇지 않으면 v1 데이터가 안전하게 거부됩니다. "v1에서 마이그레이션"을 참조하세요.

3개의 첫 번째 페인트 레이어

  1. SSR/SSG는 먼저 신뢰할 수 있고 완전히 해결된 기본 테마에서 생성된 정적 변수를 출력합니다.
  2. 헤드에서 createBootstrapStorageScript를 실행하거나 Vite 마운트 전에 bootstrapTheme를 호출하세요.
  3. 프레임워크 공급자 또는 런타임은 모든 상태의 유효성을 다시 검사하고 시작 후 소유권을 가져옵니다.
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 호출에 애니메이션을 전달합니다. Bootstrap, 복원, 시스템 변경 및 크로스탭 동기화는 항상 애니메이션 없이 원자적으로 전환됩니다. 감소된 움직임을 존중합니다.

계속: 맞춤 테마 수명 주기