Для разработчиков приложений

Интеграция Vue

Прикрепите одну среду выполнения с помощью плагина или предоставьте ее, а затем прочитайте ее неизменяемый снимок через 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>

снимок — это неглубокая ссылка, подписанная на среду выполнения; не зеркалируйте тему, внешний вид или разрешенный режим в магазине Vue.

Не загружайте редактор, пока он закрыт

Используйте defineAsyncComponent, чтобы загрузить локальный ThemeEditor, установленный через CLI, и визуализировать его только при открытии. Запись локального редактора импортирует свой собственный CSS; не импортируйте его статически в глобальный CSS.

Продолжение: создание и импорт пользовательских тем.