對於應用程式開發人員

React 和 Next.js

使用Provider和Hooks訂閱一個運行時；接下來將預設的 CSS 和 Bootstrap 放入第一油漆 HTML 中。

安裝一個提供者

tsx

import { OriaThemeProvider } from "@oriatheme/react";
import { oriaPresetThemes } from "@oriatheme/presets";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OriaThemeProvider config={{
      presets: oriaPresetThemes,
      defaultThemeId: "oria-default",
    }}>
      {children}
    </OriaThemeProvider>
  );
}

使用 Hooks 讀取快照並更改首選項

tsx

import { useOriaTheme, useThemeSnapshot } from "@oriatheme/react";

export function ThemeControls() {
  const { setAppearance, setTheme } = useOriaTheme();
  const activeId = useThemeSnapshot((snapshot) => snapshot.preference.activeThemeId);

  return <button onClick={() => setTheme(activeId === "oria-ocean" ? "oria-default" : "oria-ocean")}>
    Switch theme
  </button>;
}

useThemeSnapshot 用於訂閱穩定的切片；不要重新建立運行時或在元件內複製其狀態。

Next.js：第一個繪製和按需編輯器

在伺服器元件頭中輸出可信任預設 CSS 和 Bootstrap 腳本，然後將提供者放置在用戶端元件中。使用dynamic(..., { ssr: false }) 載入關閉的本地ThemeEditor 並僅在使用者開啟它後渲染它。

繼續：Vue 集成