For application developers

React and Next.js

Use the Provider and Hooks to subscribe to one runtime; Next puts default CSS and Bootstrap in first-paint HTML.

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

Read a snapshot and change preference with 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 is for subscribing to a stable slice; do not recreate a runtime or copy its state inside components.

Next.js: first paint and on-demand editor

Output trusted default CSS and a Bootstrap script in a Server Component head, then place the Provider in a Client Component. Load a closed local ThemeEditor with dynamic(..., { ssr: false }) and render it only after the user opens it.

Continue: Vue integration