對於應用程式開發人員

Vue 集成

使用插件或提供附加一個運行時，然後透過可組合項讀取其不可變快照。

Bootstrap 先掛載，再安裝插件

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

在後代中使用可組合項

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>

快照是訂閱運行時的淺引用；不要在 Vue 商店中鏡像主題、外觀或resolvedMode。

關閉時不要載入編輯器

使用defineAsyncComponent載入CLI安裝的本機ThemeEditor並僅在開啟時渲染它。本機編輯器條目匯入自己的CSS；不要在全域 CSS 中靜態匯入它。

繼續：建立並匯入自訂主題