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。範例中的遷移欄位是接受持久化 v1 自訂主題的唯一方法；如果沒有它，v1 資料將被安全拒絕。請參閱“從 v1 遷移”。

三層第一漆層

  1. SSR/SSG 首先輸出從受信任的、完全解析的預設主題產生的靜態變數。
  2. 在 head 中執行 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 呼叫傳遞 animate。 Bootstrap，恢復、系統變更和跨選項卡同步始終自動切換，無動畫；尊重減少的運動。

繼續：自訂主題生命週期