Pour les développeurs d'applications

React et Next.js

Utilisez le fournisseur et les hooks pour vous abonner à un runtime ; Ensuite, place les CSS et Bootstrap par défaut dans la première peinture HTML.

Monter un fournisseur

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

Lire un instantané et modifier les préférences avec Hooks

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 sert à s'abonner à une tranche stable ; ne recréez pas un runtime et ne copiez pas son état dans les composants.

Next.js : premier éditeur de peinture et à la demande

Générez CSS par défaut et un script Bootstrap dans un en-tête de composant serveur, puis placez le fournisseur dans un composant client. Chargez un ThemeEditor local fermé avec Dynamic(..., { ssr: false }) et restituez-le uniquement après que l'utilisateur l'a ouvert.

Continuer : Intégration Vue