對於應用程式開發人員

開發者快速入門

使用 React、Vue 或 Web 中发布的包启动运行时，然后使现有组件响应主题。

安裝適合您的框架的軟體包

在消費者專案中，僅安裝從 npm 發布的套件，並保留專案已使用的套件管理器和鎖定檔案。

bash

# React
pnpm add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

# Vue 3
pnpm add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/vue

# Framework-free web
pnpm add @oriatheme/presets @oriatheme/runtime-dom

在掛載之前恢復，然後讓運行時接管

首先執行 Bootstrap 以恢復上次成功儲存的快照，然後在框架掛載時啟動完整運行時。它重新驗證狀態、處理系統外觀並自動寫入變數。

React

tsx

import { createRoot } from "react-dom/client";
import { OriaThemeProvider, useOriaTheme } from "@oriatheme/react";
import { oriaPresetThemes } from "@oriatheme/presets";
import { bootstrapTheme } from "@oriatheme/runtime-dom";

bootstrapTheme({ contract: { name: "oria-standard", version: 2 } });

function Controls() {
  const { setTheme, setAppearance } = useOriaTheme();
  return <>
    <button onClick={() => setTheme("oria-ocean")}>Ocean</button>
    <button onClick={() => setAppearance("dark")}>Dark</button>
  </>;
}

createRoot(document.querySelector("#root")!).render(
  <OriaThemeProvider config={{ presets: oriaPresetThemes, defaultThemeId: "oria-default" }}>
    <Controls />
  </OriaThemeProvider>,
);

Vue

import { createApp } from "vue";
import { createOriaTheme } from "@oriatheme/vue";
import { oriaPresetThemes } from "@oriatheme/presets";
import { bootstrapTheme } from "@oriatheme/runtime-dom";
import App from "./App.vue";

bootstrapTheme({ contract: { name: "oria-standard", version: 2 } });
createApp(App)
  .use(createOriaTheme({ presets: oriaPresetThemes, defaultThemeId: "oria-default" }))
  .mount("#app");

原生網路

import { oriaPresetThemes } from "@oriatheme/presets";
import { bootstrapTheme, createOriaThemeRuntime } from "@oriatheme/runtime-dom";

bootstrapTheme({ contract: { name: "oria-standard", version: 2 } });
const runtime = createOriaThemeRuntime({
  presets: oriaPresetThemes,
  defaultThemeId: "oria-default",
});
runtime.start();
runtime.setTheme("oria-ocean");
runtime.setAppearance("system");
// Call runtime.destroy() when the app is removed.

查看範例應用程式中的完整集成

三個官方範例反映了本指南 - 在 GitHub 上瀏覽或克隆它們。

React + Vite

React 範例應用程式

提供者設定、令牌庫和按需本機編輯器。

Vue 3 + Vite

Vue 範例應用程式

插件設定共享相同的運行時狀態機。

Next.js App Router

Next.js 範例應用程式

SSR預設CSS，首次繪製Bootstrap，以及按需編輯器。

驗證結果

html receives data-oria-theme, data-oria-mode, and the correct color-scheme.
切換主題會同時更新顏色、半徑、陰影和其他變數。
持久性儲存淺色、深色或系統首選項——從不解析模式。

下一步：帶有語義標記的樣式元件