OriaTheme
GitHub

Für Anwendungsentwickler

React und Next.js

Verwenden Sie den Provider und die Hooks, um eine Laufzeit zu abonnieren. Als nächstes werden die Standardwerte CSS und Bootstrap in die Erstlackierung HTML eingefügt.

Montieren Sie einen Anbieter

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

Lesen Sie einen Schnappschuss und ändern Sie Ihre Präferenzen mit 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 dient zum Abonnieren eines stabilen Slice; Erstellen Sie keine Laufzeit neu und kopieren Sie ihren Status nicht innerhalb von Komponenten.

Next.js: erster Paint- und On-Demand-Editor

Geben Sie den vertrauenswürdigen Standardwert CSS und ein Bootstrap-Skript in einem Serverkomponentenkopf aus und platzieren Sie dann den Anbieter in einer Clientkomponente. Laden Sie einen geschlossenen lokalen ThemeEditor mit „dynamic(..., { ssr: false })“ und rendern Sie ihn erst, nachdem der Benutzer ihn geöffnet hat.

Weiter: Vue-Integration