Для разработчиков приложений

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

Прочитайте снимок и измените предпочтения с помощью хуков

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 в заголовок серверного компонента, затем поместите поставщика в клиентский компонент. Загрузите закрытый локальный редактор ThemeEditor с помощью Dynamic(..., { ssr: false }) и визуализируйте его только после того, как пользователь откроет его.

Продолжение: Интеграция Vue