应用开发者

Vue 集成

用 Plugin 或 provide 接入同一个 Runtime，再通过 Composable 读取不可变快照。

在挂载前 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");

在后代组件中使用 Composable

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 是订阅到 Runtime 的 shallow ref；不要在 Vue store 中复制 theme、appearance 或 resolvedMode。

编辑器保持关闭时不加载

用 defineAsyncComponent 动态导入 CLI 安装到本地的 ThemeEditor，并仅在打开时渲染。局部编辑器入口自行导入其 CSS；不要把它静态导入 global CSS。

继续：创建与导入自定义主题