For application developers

Vue integration

Attach one runtime with a Plugin or provide, then read its immutable snapshot through a Composable.

Bootstrap before mount, then install the 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");

Use the Composable in descendants

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 is a shallow ref subscribed to the runtime; do not mirror theme, appearance, or resolvedMode in a Vue store.

Do not load the editor while it is closed

Use defineAsyncComponent to load the CLI-installed local ThemeEditor and render it only when open. The local editor entry imports its own CSS; do not statically import it in global CSS.

Continue: create and import custom themes