アプリケーション開発者向け

開発者のクイックスタート

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.

サンプルアプリで完全な統合を確認する

3 つの公式サンプルはこのガイドを反映しており、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.
テーマを切り替えると、色、半径、影、およびその他の変数が一緒に更新されます。
永続化は、明るい、暗い、またはシステム設定を保存します (resolveMode ではありません)。

次へ: セマンティックトークンを使用してコンポーネントをスタイル設定する