应用开发者

React 与 Next.js

使用 Provider 和 Hooks 订阅同一个 Runtime；Next 将默认 CSS 与 Bootstrap 放在首屏 HTML 中。

挂载一个 Provider

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>
  );
}

从 Hook 读取快照并改变偏好

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 适合订阅一个稳定切片；不要在组件内重建 Runtime 或复制其状态。

Next.js：首屏与按需编辑器

在 Server Component 的 head 中输出受信任默认 CSS 和 Bootstrap script；将 Provider 放入 Client Component。关闭状态的本地 ThemeEditor 用 dynamic(..., { ssr: false }) 加载，并只在用户打开后渲染。

继续：Vue 集成