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

Быстрый старт для разработчиков

Запустите среду выполнения с опубликованными пакетами в React, Vue или в Интернете, а затем заставьте существующие компоненты реагировать на тему.

Установите пакеты для вашего фреймворка

В потребительском проекте устанавливайте только опубликованные пакеты из 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.

См. полную интеграцию в примерах приложений.

Три официальных примера отражают это руководство — просмотрите или клонируйте их на 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.
При переключении темы одновременно обновляются цвет, радиус, тень и другие переменные.
Постоянство сохраняет светлые, темные или системные настройки — никогда не разрешенный режим.

Далее: компоненты стиля с семантическими токенами