Pour les développeurs d'applications

Démarrage rapide pour les développeurs

Démarrez le runtime avec les packages publiés dans React, Vue ou sur le Web, puis faites en sorte que les composants existants répondent à un thème.

Installez les packages pour votre framework

Dans un projet grand public, installez uniquement les packages publiés à partir de npm et conservez le gestionnaire de packages et le fichier de verrouillage que le projet utilise déjà.

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

Restaurer avant le montage, puis laisser le runtime prendre le relais

Exécutez d'abord Bootstrap pour restaurer le dernier instantané enregistré avec succès, puis démarrez le runtime complet au montage du framework. Il revalide l'état, gère l'apparence du système et écrit les variables de manière atomique.

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

Web natif

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.

Voir les intégrations complètes dans les exemples d'applications

Les trois exemples officiels reflètent ce guide : parcourez-les ou clonez-les sur GitHub.

React + Vite

Exemple d'application React

Configuration du fournisseur, galerie de jetons et éditeur local à la demande.

Vue 3 + Vite

Exemple d'application Vue

Configuration du plugin partageant la même machine à états d'exécution.

Next.js App Router

Exemple d'application Next.js

CSS par défaut SSR, Bootstrap de première peinture et un éditeur à la demande.

Vérifier le résultat

html receives data-oria-theme, data-oria-mode, and the correct color-scheme.
Le changement de thème met à jour la couleur, le rayon, l'ombre et les autres variables ensemble.
La persistance stocke la préférence claire, sombre ou système (jamais résoluMode).

Suivant : composants de style avec jetons sémantiques