애플리케이션 개발자용

개발자 빠른 시작

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.
테마를 전환하면 색상, 반경, 그림자 및 기타 변수가 함께 업데이트됩니다.
지속성은 밝음, 어두움 또는 시스템 기본 설정을 저장하며 결코 해결 모드가 아닙니다.

다음: 의미론적 토큰이 포함된 스타일 구성요소