Für Anwendungsentwickler

Vue-Integration

Hängen Sie eine Laufzeit mit einem Plugin an oder stellen Sie sie bereit und lesen Sie dann ihren unveränderlichen Snapshot über ein Composable.

Bootstrap vor dem Mounten, dann installieren Sie das Plugin

import { createApp } from "vue";
import { createOriaTheme } from "@oriatheme/vue";
import { bootstrapTheme } from "@oriatheme/runtime-dom";
import { oriaPresetThemes } from "@oriatheme/presets";
import App from "./App.vue";

bootstrapTheme({ contract: { name: "oria-standard", version: 2 } });
createApp(App)
  .use(createOriaTheme({ presets: oriaPresetThemes, defaultThemeId: "oria-default" }))
  .mount("#app");

Verwenden Sie das Composable in Nachkommen

vue

<script setup lang="ts">
import { useOriaTheme } from "@oriatheme/vue";

const { snapshot, setAppearance, setTheme } = useOriaTheme();
</script>

<template>
  <p>{{ snapshot.preference.activeThemeId }} / {{ snapshot.resolvedMode }}</p>
  <button @click="setTheme('oria-ocean')">Ocean</button>
  <button @click="setAppearance('system')">System</button>
</template>

Snapshot ist eine flache Referenz, die für die Laufzeit abonniert ist. Spiegeln Sie nicht das Thema, das Erscheinungsbild oder den aufgelösten Modus in einem Vue-Store.

Laden Sie den Editor nicht, während er geschlossen ist

Verwenden Sie defineAsyncComponent, um den von der CLI installierten lokalen ThemeEditor zu laden und ihn nur zu rendern, wenn er geöffnet ist. Der lokale Editoreintrag importiert seinen eigenen CSS; Importieren Sie es nicht statisch im globalen CSS.

Weiter: Erstellen und importieren Sie benutzerdefinierte Designs