Für Anwendungsentwickler

Schnellstart für Entwickler

Starten Sie die Laufzeit mit veröffentlichten Paketen in React, Vue oder im Web und sorgen Sie dann dafür, dass vorhandene Komponenten auf ein Thema reagieren.

Installieren Sie die Pakete für Ihr Framework

Installieren Sie in einem Verbraucherprojekt nur veröffentlichte Pakete von npm und behalten Sie den Paketmanager und die Sperrdatei bei, die das Projekt bereits verwendet.

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

Vor dem Mounten wiederherstellen, dann die Laufzeit übernehmen lassen

Führen Sie zuerst Bootstrap aus, um den letzten erfolgreich gespeicherten Snapshot wiederherzustellen, und starten Sie dann die vollständige Laufzeit beim Mounten des Frameworks. Es validiert den Status erneut, verwaltet das Erscheinungsbild des Systems und schreibt Variablen atomar.

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

Natives Web

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.

Vollständige Integrationen finden Sie in den Beispiel-Apps

Die drei offiziellen Beispiele spiegeln diesen Leitfaden wider – durchsuchen oder klonen Sie sie auf GitHub.

React + Vite

React Beispiel-App

Anbietereinrichtung, Token-Galerie und ein lokaler On-Demand-Editor.

Vue 3 + Vite

Vue Beispiel-App

Plugin-Setup, das dieselbe Laufzeit-Zustandsmaschine nutzt.

Next.js App Router

Next.js Beispiel-App

SSR-Standard CSS, Erstlack Bootstrap und ein On-Demand-Editor.

Überprüfen Sie das Ergebnis

html receives data-oria-theme, data-oria-mode, and the correct color-scheme.
Beim Wechseln eines Themas werden Farbe, Radius, Schatten und die anderen Variablen gemeinsam aktualisiert.
Persistenz speichert die Hell-, Dunkel- oder Systempräferenz – niemals den aufgelösten Modus.

Als nächstes: Stilkomponenten mit semantischen Token